定位浮动-上机练习4html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../CSS/当当网.css">
</head>
<body>
<div class="ddw"><div class="ddw-top"><img src="../image/logo.jpg" alt=""><img src="../image/icon_count.png" alt=""><ul class="ddw-tops"><li>尾品汇</li><li>当当优品</li><li>数字馆</li><li>都看阅器</li></ul></div><div class="ddw-center"><a href="#">首页 </a><a href="#">图书 </a><a href="#">音像 </a><a href="#">童装 </a><a href="#">服装 </a><a href="#">鞋靴 </a><a href="#">运动 </a><a href="#">箱包 </a><a href="#">美妆 </a><a href="#">珠宝 </a><a href="#">家居 </a><a href="#">食品 </a><a href="#">酒 </a><a href="#">手机 </a><a href="#">数码 </a><a href="#">电脑 </a><a href="#">家电</a></div><img src="../image/banner.png" alt=""><div class="bottom"><img src="../image/bg_bang.gif" alt=""><img src="../image/book-01.jpg" alt=""><img src="../image/bookNo1.gif" alt=""><img src="../image/book-02.jpg" alt=""><img src="../image/bookNo2.gif" alt=""><img src="../image/book-03.jpg" alt=""><img src="../image/bookNo3.gif" alt=""><ul class="bottom-ul-1"><li>偷影子的人 </li><br><li>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</li><br><li>出版社：湖南文艺出版社</li><br><li>当当价：<span class="price">￥ 17.90</span></li><br><li>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</li></ul><ul class="bottom-ul-2"><li>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </li><br><li>作 者：柴静 著</li><br><li>出版社：广西师范大学出版社</li><br><li><span class="price">￥ 29.40</span>&nbsp;&nbsp;&nbsp;<span class="count">7.4折</span> </li></ul><ul class="bottom-ul-3"><li>改变孩子先改变自己 </li><br><li>作 者：贾容韬 贾毅 著</li><br><li>出版社：作家出版社</li><br><li><span class="price">￥ 22.20</span>&nbsp;&nbsp;&nbsp;<span class="count">7.4折</span></li></ul></div><div class="bottom4"><div  class="bottom2">Copyright (C) 当当网 2004-2017, All Rights Reserved</div><img src="../image/validate.gif" alt=""><div  class="bottom3">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div></div>
</div>
</body>
</html>

CSS

* {margin: 0px;padding: 0px;
}/* 设置盒子宽度 */
.ddw{width: 960px;margin: 20px auto;
}/* 清除浮动 */
.ddw-top{overflow: hidden;margin-bottom: 10px;
}li {display: inline-block;list-style: none;
}/* ul盒子加框线和背景颜色 */
.ddw-tops{border: 1px #ccc solid;padding: 5px;background: #EAFFFA;
}
/* 设置ul里面的li文字 */
.ddw-tops li{list-style:none;color: #666;font-size: 15px;
}/* 转行内块元素 */
.ddw-tops li{display: inline-block;
}/* logo和文字浮动 */
.ddw-top img:nth-of-type(1){float: left;
}/* 3折定位 */
.ddw-top img:nth-of-type(2){float: right;position: absolute;top: 24px;right: 375px;z-index: 2;
}.ddw-tops{position: relative;float: right;margin-top: 16px;
}
/* 以上是头部内容 */.ddw-center{background: #FE6915;margin-bottom: 10px;
}/* a标签的样式 */
.ddw-center a{display: inline-block;text-decoration: none;color: #fff;font-size: 10px;background: #FE6915;border-top: 1px #FE470B solid;border-bottom: 1px #FE470B solid;padding:7px 15px 7px 12px;}a:hover{color: deepskyblue;text-decoration: underline;
}
/* 以上是中间内容 */.bottom{border: 1px #CCE9AC solid;position: relative;height: 370px;margin-top: 10px;
}/* 定位3张图片*/
.bottom img:nth-of-type(1){position: absolute;top: 20px;left: -13px;
}
.bottom img:nth-of-type(2){position: absolute;top: 90px;left: 0px;
}
.bottom img:nth-of-type(3){position: absolute;top: 80px;left: 20px;}.count{color: #5EA593;font-size: 12px;
}.price {color: #890020;font-size: 12px;font-weight: 700;
}.bottom img:nth-of-type(1){color: #1A66B3;font-size:16px;
}.bottom img:nth-of-type(2){color: #1A66B3;font-size:15px;
}.bottom img:nth-of-type(3){color: #1A66B3;font-size:15px;
}.bottom ul:nth-of-type(1){width: 320px;position: absolute;top: 120px;left: 255px;font-size: 14px;line-height: 22px;
}.bottom ul:nth-of-type(2){/* color: #1A66B3; */width: 250px;position: absolute;top: 100px;right: 15px;font-size: 14px;line-height: 22px;}.bottom ul:nth-of-type(3){width: 250px;position: absolute;top: 245px;right: 15px;font-size: 14px;line-height: 22px;}.bottom img:nth-of-type(4){position: absolute;top: 90px;right: 260px;
}.bottom img:nth-of-type(5){position: absolute;top: 80px;right: 333px;
}.bottom img:nth-of-type(6){position: absolute;top: 220px;right: 260px;
}.bottom img:nth-of-type(7){position: absolute;top: 215px;right: 340px;
}.bottom4{text-align: center;
}.bottom2 ,.bottom3{vertical-align: middle;display: inline-block;margin-bottom:45px ;
}

定位浮动-上机练习4html相关推荐

CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动一.选择器选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
CSS3 浮动与定位
CSS3 浮动与定位浮动浮动特点清除浮动高度塌陷(清浮动) 定位相对定位绝对定位固定定位层级浮动 float:方向让块级元素在一行 <!DOCTYPE html> &l ...
阿ken的HTML、CSS的学习笔记_浮动与定位（笔记六）
欢迎光临你好我是阿ken 文章目录 6.1_元素的浮动 6.1.1_元素的浮动属性 float 6.1.2_清除浮动 clear 6.2_overflow 属性 6.3_元素的定位 6.3.1_元 ...
CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
前端面试CSS自检（下）页面布局、定位与浮动和场景应用（先看问题自己自述一遍不会再看答案）
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...
CSS 相对|绝对(relative/absolute)定位系列（一）
一.有话要说以前写内容基本上都是:眼睛一亮--哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
三列浮动中间列宽度自适应
今天犯了个很低级的错误..特此记入历史...... 本来需要做一个背景图平铺呢.像这样子的因为需要在移动端的网页,所以就不能直接切背景图来用,所以切了左边一块,后边一块,中间切了一个小竖条,打算平铺 ...
CSS浮动、定位与z-index层叠等级详解——响应式Web系列学习笔记
文章目录 CSS的浮动框1{float:none;} 框1{float:right;} 框1{float:left;} 框1.2.3{float:left;} CSS的定位浮动和定位的使用区别 C ...
Web前端开发笔记——第三章 CSS语言第六节 CSS定位
目录一.定义二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素三.浮动定位 (一)左浮动和右浮动 (二)清除浮动四.层定位 (一)st ...

定位浮动-上机练习4html

定位浮动-上机练习4html相关推荐

最新文章

热门文章