前端学习（1800）：前端调试之清除浮动练习2

<!DOCTYPE html>
<html lang="en"><head><!--系统内置 start--><script type="text/javascript"></script><!--系统内置 end--><meta charset="UTF-8"><title>练习</title><!-- 不要忘记引入index.css --><link rel="stylesheet" href="index.css">
</head><body><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米&lt;小爱老师&gt;</li><li class="intro">口袋里的英语外教</li><li class="price">499元起</li></ul>
</body></html>

index.css

/* 清除所有的内外边距 */
* {margin: 0;padding: 0;}
body{width: 200px;
height: 256px;
background: #FFFFFF;
}
.phone{margin-top:22px;display:block;height:130px;background:url(./images/phone.jpg) no-repeat center;background-size:contain;margin-bottom:16px;}.clearfix::after{content:'';display:block;clear:both;
}
ul{list-style:none;}
.title{height: 17px;
font-size: 12px;
line-height: 17px;
color: #000000;
text-align:center;
margin-bottom:4px;}
.intro{height: 17px;
font-size: 12px;
line-height: 17px;
color: #A8A8A8;
text-align:center;
margin-bottom:8px;}
.price{height: 17px;
font-weight: 500;
font-size: 12px;
line-height: 17px;
color: #FD6821;
text-align:center;}

运行结果

前端学习（1800）：前端调试之清除浮动练习2相关推荐

前端学习（310）：清除浮动的方法
我们经常把高度塌陷问题也叫做常见的几种清除浮动的方法高度塌陷问题-父元素高度自适应,子元素float后,造成父元素高度为0,就叫做高度塌陷问题给父元素一个高度缺点:无法高度自适应父元素{o ...
2021年最新版Web前端学习路线图-前端小白入门必读-推荐
2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...
顾川的前端学习笔记--前端开发基础
阶段一前端开发基础初始HTML 本阶段重难点 3.29小时40小节4个模块 CSS选择器盒模型 CSS三大特性浮动和清楚浮动 CSS四种定位 CSS进阶 CSS3 前端工程师需要会的PS取图案 ...
web前端学习之前端重构方案，来了解一下
前端技术发展很快,很多项目面临前端部分重构,很开心可以让我进行这次项目前端的重构方案编写,在思考的同时参考了网上很多资料,希望本篇重构方案有一定的完整性,可以带给大家一些在面临重构时有用的东西,同时希 ...
前端学习（1800）：前端调试之清除浮动练习1
<!DOCTYPE html> <html lang="en"><head><script ...
前端学习（1801）：前端调试之清除浮动练习3
index.html <!DOCTYPE html> <html lang="en"><head> ...
前端学习（1799）：前端调试之清除浮动
前端学习（2846）：css浮动和定位布局
<< 我们一起来做秒杀 >>一.css浮动 float none left rightclearnone both left right二.css定位#div_test{pos ...
前端学习（3295）：清除effect

前端学习（1800）：前端调试之清除浮动练习2

前端学习（1800）：前端调试之清除浮动练习2相关推荐

最新文章

热门文章