腾讯课堂新手前端训练营day2-盒子模型训练

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>盒子模型</title>
<style type="text/css">
body{
margin:0 0 0 0;
font-family:微软雅黑;
font-size:20px;

}
ul {
background: #ddd;
margin: 15px 15px 15px 15px;
padding: 5px 5px 5px 5px;
/* 没有设置边框 */
}
li {
color: white; /* 蓝色文本 */
background: #000; /* 浅灰色背景 */
margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/
padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */
list-style: none /* 取消项目符号 */
/* 未设置边框 */
}
li.withborder {
border-style: dashed;
border-width: 5px; /* 设置边框为2像素 */
border-color: black;
margin-top:20px；
}
</style>
</head>
<body>
<ul>
<li>今天是2017年4月19日</li>
<li class="withborder">今天下雨不能去打球了伤心</li>
</ul>
<ul>
<li>今天是2017年4月19日</li>
<li class="withborder">冷咖啡离开了杯垫，我忍住的情绪在很后面</li>
</ul>
<ul>
<li>今天是2017年4月19日</li>
<li class="withborder">拼命想挽回的从前，在我脸上依旧清晰可见</li>
</ul>

</body>
</html>

腾讯课堂新手前端训练营day2-盒子模型训练相关推荐

腾讯课堂新手前端训练营day1
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>day1 作业</ ...
从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（CSS：Day14）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:伪元素和盒子模型 - 今天你学习了吗?(Day13) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
前端笔记 | CSS盒子模型
CSS盒子模型一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距二.特殊样式 2 ...
css前端日记之盒子模型-----一起去未来
盒子模型一个标签就是一个盒子,网页布局看盒子的摆放位置. 盒子包括什么? 边框(border)内边距(padding)外边距(margin)内容(content): 边框 border的属性:粗细 ...
【web前端】CSS盒子模型
居然隔了一个星期了,啊我到底在干嘛. 使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录框架一.盒子模型 ...
web前端：4_盒子模型与样式排版（手机壁纸切换）
1,块元素特征 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
【前端基础】盒子模型和页面布局总结
一.盒子模型 1.盒模型概念在模型中,规定了元素内容.内边距.边框和外边框最内是内容,包围内容的是内边距,内边距的边缘是边框边框以外是外边距,外边距默认是透明的 2.边框 1.1.边框borde ...
web前端css之盒子模型，浮动，定位
1.ul去除自带的样式 <head><meta charset="UTF-8"><title>Title</title><st ...
【前端-CSS】盒子模型-水平方向、垂直方向的布局
框模型/ 盒模型/盒子模型水平布局元素在其父元素中的水平方向位置由margin-left.border-left.padding-left.width.padding-right.border-r ...

腾讯课堂新手前端训练营day2-盒子模型训练

腾讯课堂新手前端训练营day2-盒子模型训练相关推荐

最新文章

热门文章