ul横向排列css_CSS总结2（前端一）

最新推荐文章于 2021-03-16 18:09:38 发布

weixin_39877581

最新推荐文章于 2021-03-16 18:09:38 发布

阅读量1k

点赞数

文章标签： ul横向排列css

Day5

一.盒子模型

盒子模型中的盒子是指div标签，一个div标签就是一个小盒子，通过多个div盒子来拼凑成整个页面的内容。之所以使用盒子模型因为方便整个页面编写，使得页面编写更有条理。

1.边框

border-width:4px;边框宽度还有border-top(只有上边框)

border-style:none/dotted(点线)/solid(实线)/dashed(虚线)

border-collapse:collapse(让单元格边框合并)

border的简写：border:5px(粗细) solid(样式) pink(颜色);

2.内边距（使用padding不仅有内边距同样也会使得盒子撑大）

padding-left/right/top/bottom:2px;

padding简写padding: 1px 1px 1px 1px;注：上右下左

padding:1px;则默认四个方向内边距都为1px

3.外边距

margin=>padding（即与padding同理）

4.盒子尺寸

盒子大小=边框+内边距+内容宽高

5.text-align和margin区别

前者可通过后边加上center使得”文本“居中；后者可通过auto/xxxpx使“盒子”居中

6.清清除默认边距

往往在编写代码使系统自带默认边距，可在css样式通过此方式清除默认边距：

*{padding:0; margin:0;}

7.插入图片和背景图片的区别

图片用img标签，可用margin,padding调试边距

小图标一些背景图片用background:url()，调试边距用background-position调试

8.使用盒子css属性热度

width>margin>padding

9.盒子阴影:

border-shadow: 1px(水平阴影) 1px(垂直阴影) 1px(虚实阴影) 1px(阴影大小) #44444(阴影颜色);

附上Day5练习代码：

<!doctype html>

<html>

<head>

<title>www.Lakers information</title>

<style>

/*以后代码布局盒子时一i的那个要写上这段！！ *{

padding: 0;

margin: 0;

}*/

.box{/*大盒子里边宽高，内距，背景和外距居中*/

width: 310px;

height: 210px;

border: 1px solid #ccc;

margin: 100px auto;

padding: 10px 10px;

background: url(4.jpg);

}

.box h2{/*设置标题的字号，下划线，内距*/

font-size: 20px;

border-bottom: 1px solid #ccc;

padding: 1px 6px ;

}

.box ul li{/*这个是让li左边的黑点消失！！*/

list-style: none;

}

.box ul li{/*设置li中内容高度，并设等高，字体，下划线，小图标*/

height: 20px;

line-height: 20px;

font-size: 13px;

padding: 5px 0px;

border-bottom: 1px dashed #CB2AD8;

background: url(2.jpg) no-repeat ;

margin-left: -40px;

}

.box ul li a{/*让链接下划线消失，设置颜色和左内距*/

text-decoration: none;

color: darkmagenta;

padding-left: 30px;

}

.box ul li a:hover{/*鼠标移动到链接上的效果：链接显示下划线和链接变绿*/

text-decoration: underline;

color:greenyellow;

}

</style>

</head>

<body>

<h2 > 最新消息/New infomation </h2>

<ul>

<li><a href="#">北京时间3月4日湖人主场力克76人</a></li>

<li><a href="#">詹姆斯连续两个月获取月最佳球员</a></li>

<li><a href="#">安东尼戴维斯防守效率值联盟第一</a></li>

<li><a href="#">湖人队将于3月7号主场迎战雄鹿</a></li>

</ul>

</div>

</body>

</html>

Day6

浮动

1.浮动介绍

浮动为行内块元素的特点，float:left/right/none(默认)。使用浮动后原本的元素会漂浮起来，即原本的位置会留给别人，所以用浮动要一浮全浮。同样使用浮动后元素会默认的把其更改为行内块元素。是用浮动的目的就是为了使盒子见能够水平排列。

2.父子盒的关系

子盒不会与父盒重叠；子盒可与父盒有内边距

注意：浮动只影响后边的盒子，并不影响前边的盒子

3.兄弟盒的关系

A浮动B不浮动，则原来AB竖直排列变为只有A（B被压在了后边）

A浮动B浮动，则原来AB竖直排列变为AB水平排列

4.清除浮动

①通过CSS样式：clear:both(两侧)/left/right

②若是父子盒子给父类添加overflow:hidden;

附上Day6练习代码：

<!doctype html>

<html>

<head>

<title>湖人队中文门户网站</title>

<style>

* {

margin: 0;

padding: 0;

}

.banana{

width: 700px;

height: 250px;

margin: auto;

}

.apple{

width: 700px;

height: 250px;

}

.pear{

width: 700px;

height: 40px;

background-color: purple;

margin: auto;

}

li{

list-style: none;

}

.pear ul li a{

padding: 30px 22px;

line-height: 35px;

text-decoration: none;

color: gold;

}

.pear ul li a:hover{

text-decoration: underline;

}

.big {

height: 615px;

width: 1226px;

background-color: aqua;

margin: auto;

}

.middle {

float: left;

height: 615px;

width: 234px;

background-color: blue;

}

.middle img{

height: 615px;

width: 234px;

}

.small {

float: right;

width: 992px;

height: 615px;

background-color: antiquewhite;

}

.small li{

float:left;

height: 300px;

width: 234px;

background-color: darkorange;

margin-left: 14px;

margin-bottom: 14px;

box-shadow: 0 15px 30px rgba(0,0,.2);

}

.small li img{

height: 300px;

width: 234px;

}

</style>

</head>

<body>

</div>

<ul>

<li>

</li>

</ul>

</div><br/>

<ul>

</ul>

</div>

</body>

</html>

Day7

1.CSS属性书写顺序

布局定位属性：display position float overflow clear content

自身属性：width height margin padding border background

文本属性： color font text-decoration/align

其他属性: border-radius box-shadow

2.布局流程

版行（可视区）

据每行行行罗列而成

制作html结构

附上Day7练习代码：

<!doctype html>

<html>

<head>

<title>湖人中文门户网站</title>

</head>

<body>

</div>

</div>

<button>search...</button>

</div>

<a href="#">R.I.P for kobe_bryant</a>

</div>

<ul>

</ul>

</div>

< </a>

</div>

</li>

</li>

</li>

</li>

</ul>

</ol>

</div>

<ul>

</ul>

</div>

<div class="items one">上赛季新晋MVP字母哥与当今联盟第一人勒布朗詹姆斯的对决之战，此场也被视为总决赛预演</div>

<div class="items two">洛杉矶德比，西部最强的两支球队的对战，上赛季FMVP莱昂纳德与詹姆斯的对战，被视为西决预演</div>

<div class="items three">得分狂人哈登是当今联盟最好的得分手，他的得分能力无与伦比，火箭对有极可能与湖人季后赛相遇</div>

<div class="items four">上赛季新晋MVP字母哥与当今联盟第一人勒布朗詹姆斯的对决之战，此场也被视为总决赛预演</div>

<div class="items five">得分狂人哈登是当今联盟最好的得分手，他的得分能力无与伦比，火箭对有极可能与湖人季后赛相遇</div>

<div class="items six">得分狂人哈登是当今联盟最好的得分手，他的得分能力无与伦比，火箭对有极可能与湖人季后赛相遇</div>

</div>

</div>

<p>

|<a href="#">魔术师约翰逊</a> |

<a href="#">科比布莱恩特</a> |

<a href="#">大鲨鱼奥尼尔</a> |

<a href="#">勒布朗詹姆斯</a> |

<a href="#">天勾贾巴尔</a>

</p>

</div>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

<dl>

<dt>移动端信息 :<a href="#">

<dd>湖人队官方微博</dd>

<dd>湖人队微信公众号</dd>

<dd>湖人队twiter</dd>

<dd>湖人队youtube</dd>

<dd>湖人队facebook</dd>

</a></dt>

</dl>

</div>

<dl>

<dd>湖人队就职机会</dd>

<dd>湖人队社区行动</dd>

<dd>湖人队中国行</dd>

<dd>湖人队夏季联赛</dd>

</a></dt>

</dl>

</div>

<br> 进入NBA.com/China后，即表示阁下同意遵守NBA.com/China的隐私政策和使用条款。

<br> 有任何的建议和意见，都欢迎联络我们：NBAChinaInfo@nba.com

<br> 有关NBA商品授权合作事宜，敬请联系:GMGChinaBusinessInquiry@nba.com

</div>

</body>

</html>

weixin_39877581

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ul横向排列css_CSS总结2（前端一）

Day5 一.盒子模型一.盒子模型盒子模型中的盒子是指div标签，一个div标签就是一个小盒子，通过多个div盒子来拼凑成整个页面的内容。之所以使用盒子模型因为方便整个页面编写，使得页面编写更有条理。 1.边框 border-width:4px;边框宽度还有border-top(只有上边框) border-s...
复制链接

扫一扫

ul横向排列css_CSS总结2（前端一）

“相关推荐”对你有帮助么？