1_2_3_4_5 Html-Css

---------------------------------------------------------------------------------

HTML骨架

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

2 head标签： 文档的头部  相当于红色部分

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

---------------------------------------------------------------------------------------------------------------------------------------------------
PS:　标签有单个的，也有成对的，单个相对少一些；　排列关系有嵌套（父子）和上下（兄弟）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>40.6摄氏度：上海创出140年气象史上高温新纪录</h1>
2020年07月27日
    <p>10:58:26来源：新华网</p>
    <hr />
    <p>新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值</p>

    <p>上海已经连续２天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。２５日上海已出现了气象史上７月份“第四高”的高温值，这使得２６日的“基础”气温就很高，超过了３０摄氏度，然后不断地升温。此外，２６日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。
</p>
 <p>在上海历史上，出现４０摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站 １４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p>

 <p>由于气温实在太高，上海２６日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</p>
  <p>在上海历史上，出现４０摄氏度以上极端高温的几率并不大。<br />
      

  根据相关资料，中心城区徐家汇观测站 １４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

div span标签(重点)---布局专用

div span 是没有语义的是我们网页布局主要的2个盒子 css+div

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

span, 跨度，跨距；范围

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    我是 <b>楚乔</b>   我是宇文玥  我是 <strong>燕洵</strong>
    我是<i>倾斜</i>的  赶紧<em>脉动回来</em>
    <s>原价： 1888</s>，  现价  8.8 
    <del>原价： 1888</del>，  现价  8.8 
    <u>特殊说明</u>
    <ins>特殊说明</ins>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="timg.jpg"  height="350" title="胡歌" />  //PS: 这里只有height,没有width是因为指定一个另一个会自动根据大小变化
    <h3>title 鼠标放到图片上，显示的文字 </h3>
    <img src="timg.gif" title="梅长苏"  />  
    <h3>alt 图片显示不出的时候，替换的文字</h3>
    <img src="timg1.gif" title="梅长苏"  alt="我是梅长苏， 没了" />  
    <h3>border 图片边框</h3>
    <img src="timg.gif" title="梅长苏"  alt="我是梅长苏， 没了"  border="10"/>  
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    你爱的水果：

    <ul>   
        <li>橘子</li>
        <li>橙子</li>
        <li>酸梅</li>
        <li>大白菜</li>
        <li>
            <div>榴莲</div>
            <span></span>
        </li>
    </ul>
    
    考试成绩：
    <ol>
        <li>张三</li>
        <li>张三丰</li>
        <li>张三丰丰</li>
    </ol>

    城市：
    <dl>
        <dt>北京</dt>
        <dd>昌平区</dd>
        <dd>海淀区</dd>
        <dd>丰台区</dd>
        <dd>朝阳区区</dd>
        <dd>传智区</dd>
    </dl>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <table align="center" border="1">
        <caption>我是表格标题</caption>
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
        </thead>
        <tbody>
            <tr>
                <td>sdf</td>
                <td>12</td>
                <td>play</td>
            </tr>
            <tr>
                <td>sdf</td>
                <td>12</td>
                <td>play</td>
            </tr>
            <tr>
                <td>sdf</td>
                <td colspan="2">12</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

ps: 表单内容没有显示介绍

----------------------------------------------CSS-----!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!------------------------------------------------------------------------------------------------

PS: 结构只写结构，不要在代码里写太多属性，比如

PS: 外部样式表就是因为一个css文件

PS: 在生产中类选择器用的最多

PS: CSS自定义起名字的长单词用 first-name或者firstname，不能用first_name,因为这种是用js使用的

---------------------------------------选择器--！！！！！！！！！！！！！---------------------------------------------------------------------------------------------------------

1.多类名选择器 --给一个标签指定多个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     .red {
         color: red;
     }
     .font20 {
         font-size: 20px;
         color: blue;
     }
     .fontw {
         font-weight: 700;
     }
    </style>
</head>
<body>
    <div class="font20 red fontw">多类名</div>        //这个是先前没有印象的，一个标签指定多个多个类属性
    <div>多类名</div>
    <div>多类名</div>
    <div>多类名</div>
    <p class="red">多类名</p>
    <p>多类名</p>
    <p>多类名</p>
    <p class="red">多类名</p>
    <div>多类名</div>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

CSS字体样式属性

font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：

PS:ｅｍ有倾斜的作用，但是有时候要操作一些类标签的时候，可以用ｅｍ代替，也可以用ｓｐａｎ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        /*font-family: "微软雅黑";*/
        font-family: "microsoft yahei",  Arial; /*多个字体，会一个一个检查，如有就有第一个，如都没有就用默认字体*/
        /*font-family: Arial;*/
    }
    p {   /*统一段格式*/
        font-size: 16px;  /*千万别忘了带px 单位*/
        line-height: 28px;  /*  行高  行与行之间的距离*/  
        text-indent: 2em;  /*段落首行缩进2个字  em  也是一个单位  1em 就是一个字的距离 */
    }
    a {
        /*font-weight: bold;    字体加粗*/
        font-weight: 700;  /* 700 没有单位  ==  bold  */  
    }
    h1 {
        /*font-weight: normal;  让粗体不加粗思密达*/
        font-weight: 400;  /*让粗体不加粗思密达  400 == normal 建议用数值*/
        text-align: center; /*让h1 里面的文字水平居中*/
    }
    em {
        color: skyblue;
        font-style: normal;  /*让斜体不倾斜*/
    }
    span {
        /*color: #ff0000;*/
        color: #FDD000;
    }
    div {
        text-align: center;
    }
    .nub {
        color: #f00;
        font-weight: 400;  /*不加粗*/
    }
    </style>
</head>
<body>
    <h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>

<div>2017年07月16日20:11 <span>新浪体育 评论中大奖</span> （<a href="#" class="nub">11</a>人参与） <a href="#">收藏本文</a></div>
<hr />
<p>新浪体育讯　7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
<p>
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>

<p>据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>

<p>这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    h1 {
        /*font-size: 25px;
        font-family: "宋体";
        font-weight: 400;*/
        

    }
    /*选择器{font: font-style  font-weight  font-size/line-height  font-family;}*/
    h1 {
        /*font: 400 25px "宋体";*/
        font: 12px "微软雅黑";      /*这样写和上面注释的是一样的*/
    }
    </style>
</head>
<body>
    <h1>字体连写是有顺序的</h1>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

-----------------------------------CSS选择器----------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /*1. x需求  就是要吧所有的王思聪选出来 怎办？*/
    div p  {  /*河北  邯郸   后代选择器  p 一定是 div 的孩子    */            这个东西所有p
        color: pink;
    }

    .jianlin p {   /*中间用空格隔开*/
        color: purple;
    }
    ul li {
        color: #daa520;
    }
    </style>
</head>
<body>
    <div> 王者荣耀 </div>
    <div> 王者荣耀 </div>
    <div> 王者荣耀 </div>
    <div> 
        <p>王思聪</p> 
    </div>
    <div> 
        <p>王思聪</p>       
    </div>
    <div> 
        <p>王思聪</p>       
    </div>
    <div class="jianlin"> 
        <p>王思聪</p>       
    </div>

    <p> 王者荣耀 </p>
    <p> 王者荣耀 </p>

    <ul>
        <li>苹果</li>
        <li>梨子</li>
        <li>苹果</li>
        <li>苹果</li>
    </ul>
    <ol>
        <li>苹果</li>
        <li>梨子</li>
        <li>苹果</li>
        <li>苹果</li>
    </ol>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div.red {  /*交集选择器  既是 div  又 叫 red  满足条件 用的较少 特殊情况使用  了解 */
			color: red;
		}
		
	</style>
</head>
<body>
	<div>交集选择器</div>
	<div>交集选择器</div>
	<div class="red">交集选择器</div>
	<p>交集选择器</p>
	<p>交集选择器</p>
	<p>交集选择器</p>
	<p class="red">交集选择器</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /*1. 需求 吧 div p span 改为红色*/
   /* div {
        color: red
    }
    p {
        color: red;
    }
    span {
        color: red;
    }*/
    div, p, span {   /*并集选择器  用逗号隔开  , 代表  和  集体声明 适合于相同样式   */
        color: red;
    }
    </style>
</head>
<body>
    <div>并集选择器</div>
    <div>并集选择器</div>
    <div>并集选择器</div>
    <p>并集选择器</p>
    <p>并集选择器</p>
    <p>并集选择器</p>
    <span>并集选择器</span>
    <span>并集选择器</span>
    <span>并集选择器</span>
    <span>并集选择器</span>
    <h1>并集选择器</h1>
    <a href="#">并集选择器</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a:link {  /* 未访问过的连接状态*/
        color: #3c3c3c;
        font-size: 25px;
        text-decoration: none;  /*取消下划线*/
        font-weight: 700;
    }
    a:visited {  /*这个链接我们已经点过的样子  已访问过链接*/

        color: orange;

    }
    a:hover {  /*鼠标经过连接时候的样子*/
        color: #f10215;
    }
    a:active {  /*鼠标按下时候的样子*/
        color: green;

    }

    </style>
</head>
<body>
    <a href="http://www.asdf12312312312312.com">秒杀</a>
</body>
</html>

----------------------

PS: 行内元素只能放文本和其他行内的元素，超链接是特殊的

PS: 块级元素相当于男孩，inline相当于女的，inline-block不难不不女

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        display: inline;   /*把块级元素转换为行内元素*/
    }
    span {
        width: 100px;
        height: 100px;
        background-color: purple;
        display: block;   /*把行内元素转换为块级元素*/
    }
    a{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        display: inline-block;   /*把行内元素转换为行内块元素*/
    }
    </style>
</head>
<body>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <span>abc</span>
    <span>abc</span>
    <span>abc</span>
    <a href="#">百度</a>
    <a href="#">百度</a>
    <a href="#">百度</a>
    <a href="#">百度</a>
</body>
</html>

-------------------------------------------------案例-导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .nav {
        text-align: center;
    }
    .nav a{  /*后代选择器 限定范围  */
        width: 120px;
        height: 50px;
        /*background-color: pink;*/
        /*因为a是行内元素， 没有大小，我们需要转换  inline-block */
        display: inline-block;
        background-image: url(images/bg.png);
        text-align: center;  /*让盒子内的文字居中对齐*/
        /*1. 行内元素  行内块元素  我们可以看做文本 */
        color: #fff;
        text-decoration: none; /*取消下划线*/
        /*2. 行高等于盒子的高度，可以让 单行文本垂直居中*/
        line-height: 50px; 
    }

    .nav a:hover {  /*当我们鼠标经过了 nav 里面的连接的时候*/
        background-image: url(images/bgc.png);

    }
    .banner {
        text-align: center;
    }
    p {
        width: 100px;
        height: 20px;
        display: inline-block;
    }

    </style>
</head>
<body>
    <div class="nav">  <!-- 导航栏开始了 -->
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
    </div>
    <div class="banner">
        <p>123</p>
    </div>
    <a href="#">baidu</a>
</body>
</html>

-----------------------------------------------行高是基线和基线的距离----------------------------------------------------------------------------

PS:根据这个原理，如果想要div垂直居中，就设置行高=块级元素高度 line-height=div.height

--------------------------------------

CSS 三大特性

--------------------------------background-----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*body {*/
            /*background-color: pink;*/
            /*background-image: url(images/3.jpg);*/
/*repeat : 　背景图像在纵向和横向上平铺
no-repeat : 　背景图像不平铺
repeat-x : 　背景图像在横向上平铺
repeat-y : 　背景图像在纵向平铺 */
            /*background-repeat: repeat-y;
        } */

        div {
            width: 500px;
            height: 500px;
            background-color: purple;
            background-image: url(images/l.jpg);
            background-repeat: no-repeat; /*不平铺*/
            /*background-position: x  y ;*/
            /*background-position: center top;  top 上  bottom 下  left  左  right  右 */
            /*background-position: center center;  top 上  bottom 下  left  左  right  右 */
            /*background-position: bottom  right;  top 上  bottom 下  left  左  right  右 */
            
            /*1. positon后面可以跟方位名词  他们之间可以没有上下顺序*/
            /*2. position 如果只写一个方位名词，另外一个默认是居中的*/
            /*3. position 后面也可以跟 值px 但是 必须有顺序 x 在前面 y 后面 不能颠倒 */
            /*background-position: left;  top 上  bottom 下  left  左  right  右 */
            /*background-position: bottom;  top 上  bottom 下  left  左  right  右 */
            /*background-position:  12px 50px;*/
            /*background-position:  50px 12px ;*/
            background-position:  10px center;
        }
    </style>
</head>
<body>

    <div>
        
        
    </div>
</body>
</html>

PS: 显示生活中，经常会遇到一个低像素电脑，一般会使用大图，遇到小屏幕的就设置为 center top

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        background-color: pink;
    }
    div {
        width: 200px;
        height: 200px;
        /*background-color: #000;*/
        color: #fff;
        background: rgba(0, 0, 0, .3); /* red  green blue  alpha  0~1  */
    }
    </style>
</head>
<body>
    <div>
        我是文字内容
    </div>
</body>
</html>

-----------------------------------------

盒子模型（CSS重点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    div {
        width: 200px;
        height: 200px;
        /*border-width: 1px;
        border-color: red;*/
        /*border-style: solid; 实线*/
        /*border-style: dashed;  虚线  大使的  */
        /*border-style: dotted;  点线  大使的  */
        /*border: 1px solid blue;*/
        border-top: 1px solid red; /*上边框*/
        border-bottom: 2px solid green;
        border-left: 1px solid blue;
        border-right: 5px solid pink;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

PS: 每条边都可以设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    table {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    td {
        border: 1px solid red;
        text-align: center;
    }
    table, td {
        border-collapse: collapse;  /*合并相邻边框, 不然就会变粗*/
    }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>天王盖地虎</td>
            <td>天王盖地虎</td>
            <td>天王盖地虎</td>
        </tr>
        <tr>
            <td>宝塔镇河妖</td>
            <td>宝塔镇河妖</td>
            <td>宝塔镇河妖</td>
        </tr>
        <tr>
            <td>小鸡炖蘑菇</td>
            <td>小鸡炖蘑菇</td>
            <td>小鸡炖蘑菇</td>
        </tr>
    </table>
</body>
</html>

导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .nav {
        height: 50px;/* 高度是 50*/
        border-top: 3px solid #FF8500;  /*上边框是 3像素*/  
        border-bottom: 1px solid #EDEEF0; /*下边框是 1像素*/
        background-color: #FCFCFC; /*背景颜色*/
    }
    .nav a {   /*鼠标正常时候的样子*/
        height: 50px;
        line-height: 50px;
        /*background-color: pink;*/
        display: inline-block; /*转换*/
        color: #4c4c4c;
        text-decoration: none;
        /*padding-left: 18px;
        padding-right: 18px;*/
        padding: 0 18px;
        font-size: 14px;

    }

    .nav a:hover {
        background-color: #edeef0;
        color: #ff8400;
    }


    </style>
</head>
<body>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">新闻客户端</a>
        <a href="#">设为首页</a>
        <a href="#">奔跑吧</a>
    </div>
</body>
</html>

-----------------------------

-----------------------------------------------------------------------

PS: /*非常严重的问题， padding 会撑开带有 widht 和height盒子*/ 所以，应用时需要自己计算一下

-------------------------------新闻盒子 -例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /*div {
        width: 100px;
        height: 100px;
        border: 2px solid red;
        padding: 20px;
        margin: 30px;
    }*/
    * {
        margin: 0;
        padding: 0;  /*清除内外边距！！！！！！！！！！！*/
    }
    body {
        background-color: #eee;
    }
    .article {
        width: 380px;
        height: 263px;
        border: 1px solid #ccc;
        margin: 100px;
        padding: 20px 15px 0;  /*上 20  左右  15  下  0*/
    }
    .article h4 {
        color: #202026;
        font-size: 20px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
        /*margin-bottom: 12px;*/
    }
    li {
        list-style: none;   /*取消li 前面的小点*/
    }
    .article ul li {
        height: 38px;
        line-height: 38px;
        border-bottom: 1px dashed #ccc; /* 1像素的虚线边框*/
        text-indent: 2em;
    }
    .article  a  {
        font-size: 12px;
        color: #333;
        text-decoration: none;
    }
    .article a:hover {
        text-decoration: underline;  /*添加下划线*/
    }
    .article ul {
        margin-top: 12px;
    }
    </style>
</head>
<body>
  <div class="article">
          <h4>最新文章/New Articles</h4>
          <ul>
              <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
              <li><a href="#">体验javascript的魅力</a></li>
              <li><a href="#">jquery世界来临</a></li>
              <li><a href="#">网页设计师的梦想</a></li>
              <li><a href="#">jquery中的链式编程是什么</a></li>
          </ul>
  </div>
</body>
</html>

----------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        text-align: center; /*可以让盒子内容（文字 行内元素 行内块元素）居中对齐*/
        width: 300px;
        height: 100px;
        background-color: pink;
         /* margin: 0 auto; 通俗写法 0 auto  上下是 0  左右是auto  自动  水平居中对齐 */
         /* margin-left: auto;
         margin-right: auto; 自动充满*/
         /* margin: auto; 上下左右都是auto*/
        /* margin: 100px auto;*/
        margin: 0 auto; /*居中 盒子 标签，必须是指定过块级 盒子元素*/
    }
    </style>
</head>
<body>
    <div>
        认识一周了
    </div>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
        /*padding-top: 50px;*/
        /*border-top: 1px solid pink; 1. 用border*/ 
        /*padding-top: 1px;           2 用padding */
        overflow: hidden;  /*         3. 用这个单词可以解决，具体单词的意思我们后面讲*/
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        margin-top: 50px;
        margin-left: 50px;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        height: 200px;
        background-color: pink;
        width: 300px;
        /* padding-left: 30px; 因为 父盒子 有宽度 给定值了，则padding会撑开*/

    }
    .son {
        padding-left: 30px;
        /*儿子 没有给定宽度 用的是默认的， 所以 padding 不会撑开盒子*/
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">123</div>
    </div>
</body>
</html>

----------------------------------圆角-----------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 312px;
        height: 312px;
        /*background-color: pink;*/
        margin: 100px auto;  
        /*border-radius: 50%; 让一个正方形  变成圆圈*/
        border: 1px solid red;
        border-radius: 150px 0;  
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

-----画圆的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        background-color: #ccc;
    }
    .radius a {
       width: 172px;
       height: 172px;
       background-color: #fff;
       display: inline-block;
       margin: 30px;
       border-radius: 50%;
       text-align: center;
       line-height: 172px;
       color: red;
       text-decoration: none;
       font-weight: 700; 
    }
    .radius a:hover {
        background-color: red;
        color: #fff;
    }
    </style>
</head>
<body>
    <div class="radius">
        <a href="#">文字内容</a>
        <a href="#">文字内容</a>
        <a href="#">文字内容</a>
        <a href="#">文字内容</a>
    </div>
</body>
</html>

----------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    div {
        width: 200px;
        height: 200px;
        /*box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);*/
        /*transition: all 1s;*/
        
    }
    div:hover {  /*鼠标经过div时候的样子。。。*/
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

浮动：浮动的价值是为了div能在一行显示，虽然inline-block也能实现，但是不太好，有缝隙

PS: 传统的标签布局操作上重上到下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        /*display: inline-block;*/
        /*float: left;*/
    }
    .up {
        width: 300px;
        height: 200px;
        background-color: pink;
        float: left;
    }
    .down {
        width: 320px;
        height: 220px;
        background-color: purple;
        
    }
    </style>
</head>
<body>
    <div class="up"></div>
    <div class="down"></div>
</body>
</html>

PS: 内部都为float的，才能一行排列

PS:　下面是特性３

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .bb {
        height: 100px;
        background-color: pink;
        float: left;  /*可以让元素默认转换为行内块元素 特性*/
    }
    span {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;  
        /*妙用  如果已经给 行内元素添加了浮动 此时不需要转换了这个元素也可以有宽高*/
    }
    .aa{
        height: 100px;
        background-color: red;

    }
    </style>
</head>
<body>
    <div>
        <div class="bb">哒哒哒</div>
       <span>123123123</span>

        <div class="bb">哒哒哒点对点</div>
    </div>
    <div class="aa">
        ;hkj;hjk;hjk;njk;hkl;dfasd
    </div>

</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box {
        width: 900px;
        background-color: #eee;
        border: 1px dashed #ccc;
        margin: 0 auto; /*居中属性*/
    }
    .top {
        height: 80px;    
    }
    .banner {
        height: 120px;
        /*margin: 0 auto;*/
        margin: 5px auto;
    }
    .main {
        height: 500px;
    }
    .footer {
        height: 100px;
        /*margin: 0 auto;
        margin-top:5px;*/ 
        margin: 5px auto 0;
    }
    </style>
</head>
<body>
    <div class="top box">top</div>
    <div class="banner box">banner</div>
    <div class="main box"></div>
    <div class="footer box"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .top {
        width: 900px;
        height: 80px;
        background-color: pink;
        margin: 0 auto;
    }
    .banner {
        width: 900px;
        height: 150px;
        background-color: purple;
        margin: 0 auto;
    }
    .main {
        width: 900px;
        height: 500px;
        background-color: skyblue;
        margin: 0 auto;
    }

    .left {
        width: 288px;
        height: 500px;
        background-color: yellow;
        float: left;
        border: 1px solid red;
    }
    .right {
        width: 600px;
        height: 500px;
        background-color: deeppink;
        float: right;
        
    }
    .footer {
        width: 900px;
        height: 120px;
        background-color: black;
        margin: 0 auto;
    }

    </style>
</head>
<body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .top {
        
        height: 80px;
        background-color: pink;
        
    }
    .top-inner {
        width: 900px;
        height: 80px;
        /*background-color: #ababab;*/
        margin: 0 auto;
    }
    .banner {
        width: 900px;
        height: 150px;
        /*background-color: purple;*/
        margin: 0 auto;
    }
    .banner li {
        float: left;
        width: 217px;
        height: 150px;
        margin-right: 10px;
    }
    .one {
        background-color: purple;
    }
    .two {
        background-color: blue;
    }
    .three {
        background-color: pink;
    }
    .banner .four {/*这是体现优先级的的好处，*/
        background-color: green;
        margin-right: 0;
        float: right;
    }
    .main {
        width: 900px;
        height: 500px;
        background-color: skyblue;
        margin: 0 auto;
    }

    .left {
        width: 288px;
        height: 500px;
        background-color: yellow;
        float: left;
        border: 1px solid red;
    }
    .right {
        width: 600px;
        height: 500px;
        background-color: deeppink;
        float: right;
        
    }
    .footer {
        width: 900px;
        height: 120px;
        background-color: black;
        margin: 0 auto;
    }

    </style>
</head>
<body>
    <div class="top">
        <div class="top-inner">123</div>
    </div>
    <div class="banner">
        
        <ul>
            <li class="one">1</li>
            <li class="two">2</li>
            <li class="three">3</li>
            <li class="four">4</li>
        </ul>
    </div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer"></div>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云道首页</title>
    <!-- 引入外面的css文件 -->
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 顶部导航栏开始啦 -->
    <div class="header">
        <div class="inner">
            <div class="logo"> <!-- 放logo 左浮动 -->
                <a href="#"><img src="images/logo.png" /></a>
            </div>
            <div class="nav"> <!-- 导航栏  右浮动 -->
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">云道商城</a></li>
                    <li><a href="#">智慧门店</a></li>
                    <li><a href="#">营销平台</a></li>
                    <li><a href="#">媒体联盟</a></li>
                    <li><a href="#">关于云道</a></li>
                </ul>
            </div>
        </div>
    </div>
<!-- 顶部导航栏结束啦 -->

   <!-- banner star -->
   <div class="banner">
   
   </div>
   <!-- banner end -->

   <!-- 我们服务模块 -->
   <div class="service">
           <div class="service-hd">
               <h3>
                   <img src="images/ser.png">
               </h3>
               <p>shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系...
我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！</p>
           </div>
           
   </div>

</body>
</html>

/*
* @Author: andy
* @Date:   2017-12-09 15:05:46
* @Last Modified by:   andy
* @Last Modified time: 2017-12-09 15:05:46
*/
/* 先删除默认的内外边距 */
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #fafafa;
    height: 3000px;
}
li {
    list-style: none; /*  取消li 的小点 */
}


/* 顶部导航栏开始啦 */
.header {
    height: 100px;
    background-color: #fff;
}
.inner {
    width: 1200px;
    height: 100px;
    /* background-color: pink; */
    margin: 0 auto;
    line-height: 100px;
}
.logo {
    float: left;
}
.nav {
    float: right;
}
.nav li  {
    float: left;
    margin: 0 20px;
}
.nav li a {
    color: #333;
    text-decoration: none;
}
.nav li a:hover {
    color: #2288f6;
}

/* banner STAR */
.banner {
    height: 620px;
    background: url(../images/banner.jpg) no-repeat top center;
}
/* banner end */

.service {
    /* margin-top: 75px; */
    width: 1055px;
    height: 660px;
    /* background-color: pink; */
    margin: 75px auto 0;
}
.service-hd {
    border-top: 1px solid #ccc;
    margin: 0 25px;
}
.service-hd h3 {
    width: 167px;
    height: 46px;
    margin: -15px auto 0;
    
}
.service-hd p {
    font-size: 12px;
    color: #666;
    line-height: 26px;
    text-align: center;
    width: 830px;
    margin: 15px  auto 0;


}

---------------------------------------------------------------------------------------------------------------------------------------------------

posted on 2019-02-11 22:40 biyangqiang 阅读(317) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

biyangqiang

1_2_3_4_5 Html-Css

---------------------------------------------------------------------------------------------------------------------------------------------------

div span标签(重点)---布局专用

CSS字体样式属性

font-size:字号大小

CSS 三大特性

盒子模型（CSS重点）

导航

公告