html+css第一天

边框：

border

边框线：

border-style:

solid    实线

dashed   虚线

dotted   点虚线

边框颜色：

border-color

边框粗细：

border-width     单位/px

         border-style: solid;

         border-color: red;

         border-width: 5px;

简写：

border: 5px solid blue;

单独给一条边加边框：

border-top:solid red 2px;        （上边框线）

border-bottom:solid red 2px;        （下边框线）

border-left:solid red 2px;        （左边框线）

border-right:solid red 2px;        （右边框线）

注意：

1.每个值之间用空格隔开

2.每个值之间的顺序任意

 

行内与块级

行内标签：

宽高不可控，不独占一行

<img/>

<span></span>

<a></a>

块级标签（常用）

块级宽高可控，独占一行

<p></p>

<h1></h1>

<div></div>

转换：

行内转块级：

        display:block;

块级转行内：

        display:inline;

转行内块：

    宽高可控，不独占一行

    display:inline-block;

列表

1.有序列表    ol    li

2.无序列表    ul    li

3.自定义列表  dl     dt   dd

有序列表：

    <ol>

        <li>我是列表项</li>

        <li>我是列表项</li>

        <li>我是列表项</li>

        <li>我是列表项</li>

    </ol>

无序列表：

    <ul>

        <li>我是列表项</li>

        <li>我是列表项</li>

        <li>我是列表项</li>

        <li>我是列表项</li>

    </ul>

自定义列表：

    <dl>

       <dt>列表标题</dt>

       <dd>我是列表项</dd>

       <dd>我是列表项</dd>

       <dt>列表标题</dt>

       <dd>我是列表项</dd>

       <dd>我是列表项</dd>

       <dt>列表标题</dt>

       <dd>我是列表项</dd>

       <dd>我是列表项</dd>

    </dl>

list-style:   列表样式

      none：  取消

行高

line-height    调整每一行之间的间距(高度)

上下居中：把行高的值设置成与外侧盒子高度相同即可。

 

文本对齐方式

text-aline:center

css：

    .nav{

       width: 100%;

       height: 50px;

       list-style: none;

    }

    .nav li{

        width:59px;

        height: 50px;

        float: left;

        line-height: 50px;

        text-align: center;

        border-bottom:solid 1px #ccc;

        border-left:solid 1px #ccc;

    }

html：

<ul class="nav">

            <li style="border-left: none; width: 60px;">热点</li>

            <li>故事</li>

            <li>教育</li>

            <li>游戏</li>

        </ul>

圆角效果：

border-radius

值：100%   px

给盒子半径就会变成圆

分别设置四个角的不同的圆角效果：

border-radius:10px 5px 8px 15px;

四个值： 左上       右上       右下     左下

border-radius:10px 5px 8px;

三个值： 左上       右上和左下        右下    

border-radius:10px 5px;

两个值：  左上和右下       右上和左下  

阴影

1.盒子阴影

  box-shadow:

  1.X轴偏移量   阴影水平的宽度   必选   可以给负数

  2.Y轴偏移量   阴影垂直的高度   必选   可以给负数

  3.阴影模糊半径   阴影边缘模糊程度  可选   必须是正数  

  4.阴影颜色    可选  

 box-shadow: 10px 10px 7px rgb(151, 149, 149),-10px -10px 7px rgb(151, 149, 149);  

2.文字阴影

  text-shadow:

  1.X轴偏移量   阴影水平的宽度   必选   可以给负数

  2.Y轴偏移量   阴影垂直的高度   必选   可以给负数

  3.阴影模糊半径   阴影边缘模糊程度  可选   必须是正数  

  4.阴影颜色    可选  

css:

        p{

            width: 200px;

            height: 200px;

            background-color: pink;

            border-radius:70px 15px;

            text-align: center;

            line-height: 200px;

            font-size: 30px;

            color: #fff;

            box-shadow: 10px 10px 7px rgb(151, 149, 149);

            text-shadow:5px 5px 5px #000;

        }

html:

<p>

       文字

</p>

盒子模型：

所有的HTML元素都可以看成盒子模型。

组成：

        边框(border),

        内容(width,height)

        边距( 内边距(padding)和外边距(margin) )

<div></div>    盒子    

布局方式：  div+css

之前的布局方式：table表格

 

边距（布局方式之一）

1.内边距

padding

内容到边框的间距

padding-top       上内边距

padding-bottom    下内边距

padding-left        左内边距

padding-right        右内边距

简写的方向和外边距一样。

2.外边距

 margin     调整盒子与盒子之间的距离

单独给一个方向加外边距：

margin-top

margin-bottom

margin-left

margin-right

简写：

margin:10px 20px 30px 40px;

四个值：上    右    下   左

margin:10px   20px   30px;

三个值：上     左右    下  

margin: 10px    20px;

两个值：上下     左右

margin:10px;

一个值：四个方向

左右居中效果：

margin-left  和   margin-right    值给auto

 

浮动：float     布局方式之一

会使我们的元素向左或者向右移动，不能上下移动，其周围的元素会重新排列。

值：

  float:left;  左浮动

  float:right; 右浮动

清除浮动：

1.调成一个层面上

2.给浮动元素外侧套一个盒子

3.clear:both;  

css：

        .aa{

            width: 200px;

            height: 200px;

            background-color: pink;

            float: left;

        }

        .bb{

            width: 100px;

            height:240px;

            background-color: palegreen;

            float: right;

        }

html： 

  <div class="aa"></div>

    <!-- <div style="clear: both"></div> -->   

    <div class="bb"></div>