前端学习(1800):前端调试之清除浮动练习1

<!DOCTYPE html>
<html lang="en"><head><!--系统内置 start--><script type="text/javascript"></script><!--系统内置 end--><meta charset="UTF-8"><title>练习</title><link rel="stylesheet" href="index.css">
</head><body><section class="section-goods"><main class="main-good-list"><!--商品头部--><header class="clearFix"><div class="title-left">智能</div><ul class="title-right"><li class="selected">智能</li><li>安防</li><li>出行</li></ul></header><!--商品列表--><ul class="good-list clearFix"><li></li><li></li><li></li><li></li><li class="margin-off"></li><li></li><li></li><li></li><li></li><li class="margin-off"></li></ul><a class="book" href="#"></a></main></section>
</body></html>

index.css

* {margin: 0px;padding: 0px;box-sizing: border-box;
}ul {list-style: none;
}.clearFix::after {content: '';display: block;clear: both;
}.section-goods {width: 1439px;background: #F5F5F5;
}.main-good-list {width: 1048px;margin: 0 auto;
}/*商品头部*/
.title-left {float: left;color: #000000;font-size: 20px;line-height: 54px;
}.title-right {float: right;
}.title-right>li {position: relative;box-sizing: border-box;float: left;margin-left: 20px;line-height: 54px;color: #999999;font-size: 16px;
}.title-right>li.selected {margin-left: 0px;color: #FD6821;
}.title-right>li.selected::after {content: '';position: absolute;bottom: 11px;left: 1px;width: 30px;height: 2px;background: #FD6821;
}
.good-list>li {float: left;width: 200px;height: 256px;margin-right: 12px;margin-bottom: 12px;background-color: #FFFFFF;
}.good-list>li.margin-off {margin-right: 0px;
}/*电纸书*/
.book {display: block;width: 1048px;height: 103px;margin: 0 auto;margin-top: 20px;background: url(./images/book.jpg) no-repeat center;background-size: contain;
}

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/418897.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ArcGIS生成根据点图层生成等值面并减小栅格锯齿的操作步骤

ArcGIS生成根据点图层生成等值面并减小栅格锯齿的操作步骤 原文:ArcGIS生成根据点图层生成等值面并减小栅格锯齿的操作步骤一、打开ArcMAP并加载上相应的点图层和边界面图层 二、ArcToolbox--Spatial Analyst工具--差值分析--克里金法(根据不同的情况选择不同的算法&#xff0c…

数据结构实验三 树的遍历生成树

广州大学学生实验报告 开课实验室&#xff1a;计算机科学与工程实验&#xff08;电子楼418A&#xff09; 2019年4月19日 学院 计算机科学与教育软件学院 年级、专业、班 计算机科学与技术 姓名 学号 实验课程名称 数据结构实验 成绩 实验项目名称 实验三…

前端学习(1800):前端调试之清除浮动练习2

<!DOCTYPE html> <html lang"en"><head><!--系统内置 start--><script type"text/javascript"></script><!--系统内置 end--><meta charset"UTF-8"><title>练习</title><!-- 不…

java參数传递机制浅析

欢迎转载&#xff0c;转载请声明出处&#xff01;-----------------------------------------前言&#xff1a;java语言中&#xff0c;參数的传递仅仅有一种机制。那就是值传递。 举例&#xff1a;以下将通过几个样例来说明java中的參数传递机制&#xff0c;这些样例基本涵盖了…

数据库实验四 用户权限管理

广州大学学生实验报告 开课实验室&#xff1a;计算机科学与工程实验&#xff08;电子楼418B&#xff09; 2019年5月22日 学院 计算机科学与网络工程学院 年级、专业、班 计科172 姓名 学号 实验课程名称 数据库原理实验 成绩 实验项目名称 用户权限管理…

前端学习(1801):前端调试之清除浮动练习3

index.html <!DOCTYPE html> <html lang"en"><head><!--系统内置 start--><script type"text/javascript"></script><!--系统内置 end--><meta charset"UTF-8"><title>练习</title&g…

Java编程思想学习(一) 一切都是对象

前言 Java是基于C的&#xff0c;但Java是一种更加纯粹的面向对象程序设计语言。 C和Java都是混合&#xff0f;杂合型语言。杂合型语言允许多种编程风格。 用引用操纵对象 每种编程语言都有自己操纵内存中元素的方式。 直接操纵元素用某种基于特殊语法的间接表示&#xff08;C和…

C++学习笔记之对文件的操作1

转载自** https://www.cnblogs.com/uniqueliu/archive/2011/08/03/2126545.html ** 前言 我们在编写程序的时候&#xff0c;最密不可分的就是对文件进行相应的操作&#xff0c;我们可以从文件中读取数据&#xff0c;可以将数据保存到文件&#xff0c;可以…… 总而言之&…

C++学习笔记之对文件的操作2

转载自** https://www.cnblogs.com/uniqueliu/archive/2011/08/03/2126680.html ** 什么都不说了&#xff0c;继续《C学习笔记之对文件的操作<1>》的内容… 功能展示 打开文件的方式 当我们想要打开的文件不存在的时候&#xff0c;一般地&#xff0c;ofstream类的对象…

前端学习(1802):前端调试之事件伪类练习

index.html <!DOCTYPE html> <html lang"en"><head> <!--系统内置 start--> <script type"text/javascript"></script> <!--系统内置 end--><meta charset"UTF-8"><title>练习</titl…

前端学习(1809):前端调试之微博头部开发

index.html <!DOCTYPE html> <html lang"en"><head><!--系统内置 start--><script type"text/javascript"></script><!--系统内置 end--><meta charset"UTF-8"><title>微博实战--head&l…

数据结构实验四 排序算法的实现

广州大学学生实验报告 开课实验室&#xff1a;计算机科学与工程实验&#xff08;电子楼416&#xff09; 2019年6月4日 学院 计算机科学与教育软件学院 年级、专业、班 姓名 学号 实验课程名称 数据结构实验 成绩 实验项目名称 实验四 排序算法 指导老…

数据结构实验五 查找算法的实现

广州大学学生实验报告 开课实验室&#xff1a;计算机科学与工程实验&#xff08;电子楼416B&#xff09; 2019年6月11日 学院 计算机科学与教育软件学院 年级、专业、班 姓名 学号 实验课程名称 数据结构实验 成绩 实验项目名称 实验五 查找算法 指导…

前端学习(1811):前端调试之css装饰cursor练习

index.html <!DOCTYPE html> <html lang"en"><head><!--系统内置 start--><script type"text/javascript"></script><!--系统内置 end--><meta charset"UTF-8"><title>练习</title&g…

数据结构实验六 综合数据处理

广州大学学生实验报告 开课实验室&#xff1a;计算机科学与工程实验&#xff08;电子楼416A&#xff09; 2019年6月14日 学院 计算机科学与教育软件学院 年级、专业、班 计算机大类 144班 姓名 学号 实验课程名称 数据结构实验 成绩 实验项目名称 实验六…

CSS中的text-shadow。

text-shadow&#xff08;文字投影&#xff09;&#xff0c;box-shadow&#xff08;容器投影&#xff09;&#xff0c;border-radius&#xff08;圆角&#xff09;这三个属性估计以后用的比较多&#xff0c;记录 一下。目前不支持IE系列&#xff08;不过可以使用其他方法实现&am…

前端学习(1803):前端调试之事件伪类练习二

index.html <!DOCTYPE html> <html lang"en"><head><!--系统内置 start--><script type"text/javascript"></script><!--系统内置 end--><meta charset"UTF-8"><title>练习</title&g…