html + css实现油画商场页面

index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>商城</title><!-- 引用外部css文件,html文件与外部index.css文件处于同级目录下 --><link rel="stylesheet" type="text/css" href="market.css"><!-- 引用外部js文件 --><!-- <script type="text/javascript" src="market.js"></script> -->
</head>
<body><!-- 头部栏目区 --><div class="header"><div class="div1"><span class="c">C</span><span class="a">a</span><span class="i">i</span><span class="d">d</span><span class="o">o</span><span class="n">n</span><span class="g">g</span></div><div class="div2">油画商城</div><div class="div3"><ul><!-- href="#"表示不刷新页面,停留在当前页面 --><a href="#"><li class="login">登录</li></a><a href="#"><li class="regist">注册</li></a></ul></div></div><div class="fen"></div><!-- 正文区 --><div class="content"><!-- banner区 --><div class="banner"><img class="banner_img" src="img/welcome.png"></div><!-- 商品展示区,使用li列表实现商品布局排布 --><div class="img_content"><ul><li><img class="img_li" src="img/wumingnvlang.jpg"><div class="info"><h3>无名女郎</h3><p>刘备有心抱负于天下，关羽、张飞二人各自身怀绝技，一直未得到展示，此前唯有关羽斩杀华雄初显本领。袁绍派出八路诸侯前往虎牢关迎敌，曹操引军于两关之间接应。</p><div class="img_btn"><div class="price">￥5800元</div><a href="#"><div class="btn"><img src="img/cart.svg"></div></a></div></div></li><li><img class="img_li" src="img/wumingnvlang.jpg"><div class="info"><h3>无名女郎</h3><p>刘备有心抱负于天下，关羽、张飞二人各自身怀绝技，一直未得到展示，此前唯有关羽斩杀华雄初显本领。袁绍派出八路诸侯前往虎牢关迎敌，曹操引军于两关之间接应。</p><div class="img_btn"><div class="price">￥5800元</div><a href="#"><div class="btn"><img src="img/cart.svg"></div></a></div></div></li><li><img class="img_li" src="img/wumingnvlang.jpg"><div class="info"><h3>无名女郎</h3><p>刘备有心抱负于天下，关羽、张飞二人各自身怀绝技，一直未得到展示，此前唯有关羽斩杀华雄初显本领。袁绍派出八路诸侯前往虎牢关迎敌，曹操引军于两关之间接应。</p><div class="img_btn"><div class="price">￥5800元</div><a href="#"><div class="btn"><img src="img/cart.svg"></div></a></div></div></li><li><img class="img_li" src="img/wumingnvlang.jpg"><div class="info"><h3>无名女郎</h3><p>刘备有心抱负于天下，关羽、张飞二人各自身怀绝技，一直未得到展示，此前唯有关羽斩杀华雄初显本领。袁绍派出八路诸侯前往虎牢关迎敌，曹操引军于两关之间接应。</p><div class="img_btn"><div class="price">￥5800元</div><a href="#"><div class="btn"><img src="img/cart.svg"></div></a></div></div></li><li><img class="img_li" src="img/wumingnvlang.jpg"><div class="info"><h3>无名女郎</h3><p>刘备有心抱负于天下，关羽、张飞二人各自身怀绝技，一直未得到展示，此前唯有关羽斩杀华雄初显本领。袁绍派出八路诸侯前往虎牢关迎敌，曹操引军于两关之间接应。</p><div class="img_btn"><div class="price">￥5800元</div><a href="#"><div class="btn"><img src="img/cart.svg"></div></a></div></div></li><li><img class="img_li" src="img/wumingnvlang.jpg"><div class="info"><h3>无名女郎</h3><p>刘备有心抱负于天下，关羽、张飞二人各自身怀绝技，一直未得到展示，此前唯有关羽斩杀华雄初显本领。袁绍派出八路诸侯前往虎牢关迎敌，曹操引军于两关之间接应。</p><div class="img_btn"><div class="price">￥5800元</div><a href="#"><div class="btn"><img src="img/cart.svg"></div></a></div></div></li></ul></div><!-- 商品分页 --><div class="page_nav"><ul><li><a href="#">首页</a></li><li><a href="#">上一页</a></li><li class="first_page"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">...</a></li><li><a href="#">98</a></li><li><a href="#">99</a></li><li><a href="#">下一页</a></li><li><a href="#">尾页</a></li></ul></div></div><!-- 页脚 --><div class="footer"><p>©2019 <span>caidong</span> &emsp; 前端商品展示页面 &emsp; HTML &emsp; CSS &emsp; JavaScript</p></div>
</body>
</html>

market.css

/*清除所有默认边距*/
*{margin: 0;padding: 0;
}/*设置body样式*/
body{font-size: 14px;background-color: #F5F5F5;
}/*设置超链接样式*/
a{text-decoration-line: none; /*去除超级链接的下划线*/color: black; /*修改超链接的文字颜色为黑色*/
}/*设置列表样式*/
ul{list-style-type: none;
}/*设置头部栏目样式*/
.header{width: 100%;height: 60px;text-align: center; /*内容垂直居中*/line-height: 80px;background-color: white;box-shadow: 5px 0px 5px 5px #ccc; /*添加阴影*/top: 0; /*设置固定定位的位置为紧贴浏览器的左上角*/left: 0;position: fixed; /*固定定位,位置相对浏览器固定显示,不会随滚动条的滚动而移动*//*overflow: hidden;*/
}.header .div1{float: left;font-size: 40px;font-weight:bold; /*设置字体加粗*/font-family: "华文行楷";line-height: 60px;margin-left: 25px;margin-right: 50px;/*overflow: hidden;*/
}/*.header .div1 .c,.d{color: #0000FF;
}.header .div1 .a,.o{color: #FF0000;
}.header .div1 .i,.n{color: #FFD700;
}.header .div1 .g{color: #008B00;
}*/.header .div2{float: left;font-size: 40px;font-weight:bold; /*设置字体加粗*/font-family: "华文行楷";line-height: 60px;
}.header .div3{float: right;line-height: 60px;
}.header .div3 ul li{float: left;margin-right: 50px;color: blue;font-size: 15px;
}.header .div3 ul li:hover{color: #FF0000;
}/*辅助区fen*/
.fen{height: 50px;
}/*正文区content(banner区、商品展示区)*/
.content{width: 1200px;margin: 0 auto; /*块状元素水平居中(行级元素无效),上下边距为0,左右边距自动适应*/
}.content .banner .banner_img{margin-top: 30px;
}.content .img_content ul{width: 1260px;
}.content .img_content ul li{width:     360px;height: 500px;float: left;margin: 30px 60px 60px 0;background-color: white;/*设置边框样式*/box-shadow: 0 0 5px 3px #ccc; /*水平阴影,垂直阴影,阴影渐变程度,阴影尺寸,阴影颜色*/-webkit-box-shadow: 0 0 5px 3px #ccc; /*谷歌浏览器识别*/-moz-box-shadow: 0 0 5px 3px #ccc; /*火狐浏览器识别*/
}.content .img_content .info{width: 300px;margin-left: 30px;
}.content .img_content .info h3{font-size: 25px;color: red;margin-top: 20px;margin-bottom: 20px;
}.content .img_content .info p{line-height: 25px;
}.content .img_content .info .img_btn{margin-top: 30px;
} .content .img_content .info .img_btn .price{float: left;font-size: 20px;color: red;
}.content .img_content .info .img_btn .btn{width: 60px;height: 30px;background-color: red;text-align: center;line-height: 30px;border-radius: 5px 5px 5px 5px;float: right;
}.content .img_content .info .img_btn .btn img{width: 25;height: 20px;margin-top: 5px;
}/*商品分页区*/
.content .page_nav{width: 1200px;height: 30px;line-height: 30px;margin: 0 auto;margin-top: 30px;margin-bottom: 30px;overflow: hidden;
}.content .page_nav ul{list-style-type: none; /*取消超级链接的下划线*/ width: 572px;   /*设置块级元素的宽度,否则默认为父级容器的宽度*/margin: 0 auto; /*对块级元素设置margin: 0 auto; 可起到水平居中效果*/padding-left: 40px;
}.content .page_nav ul li{float: left; /*对li列表设置float: left;使li列表由垂直排列改为水平排列*/margin-left: 20px;
}.content .page_nav .first_page{border-radius: 50%;  /*设置块级元素的边框圆角弧度*/padding: 0 10px; /*设置内间距*/background-color: #DCDCDC;
}/*页脚区footer*/
.footer{width: 1200px;margin: 0 auto 0 auto; /*设置块级元素水平居中,该方法只能用于水平居中,垂直居中无效*/border-top: 1px solid red; /*设置上边框样式*/
}.footer p{height: 100px;text-align: center; /*设置字体居中/行级元素水平居中*/line-height: 100px; /*设置字体居中/行级元素垂直居中*/letter-spacing:1px; /*字体间距*/
}

html + css实现油画商场页面相关推荐

css网页设计作业_小姐姐用 HTML + CSS 画油画？谁能想到前端还有这么一手操作！...
GitHub 项目上好项目真的很多,但作者长的这么漂亮的肯定屈指可数了. 用 HTML + CSS 画油画如图所示,这位小姐姐的名字叫 Diana Smith ,在她的个人博客上介绍自己是一位 Ja ...
bulma.css_如何建立一个？具有Bulma CSS的特斯拉响应页面
bulma.css by ZAYDEK 由ZAYDEK 0-60 in 1.9s? (0-60 in 1.9s ?) 如何建立一个? 具有Bulma CSS的特斯拉响应页面 (How To Build ...
css京东购物车静态页面实现
css京东购物车静态页面实现 <!DOCTYPE html> <html><head><meta charset="utf-8">& ...
[css] 移动端微信页面有哪些兼容性问题及解决方案是什么？
[css] 移动端微信页面有哪些兼容性问题及解决方案是什么? 1.rem方案通过reset js进行适配 2.vw 方案搭配px to viewport进行适配个人简介我是歌谣,欢迎和大家一起交 ...
应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
Css基本语法及页面引用
Css基本语法及页面引用 CSS代码出现在三个地方 </head><body><b style='....'>兄弟连</b> <!-- 1. 行内 ...
html 网页主题设置吗,如何使用css样式对html页面进行背景设置呢？
摘要: 下文讲述css样式对html页面的背景色.背景图片进行相关设置的方法分享,如下所示: 在html中,定义元素的背景信息,可以采用以下css属性,如下所示: css属性功能 background ...
利用css和js实现页面的标签效果。(标签个数可以动态变化)
利用css和js实现页面的标签效果 css <style> .menu{ margin-bottom:-15px;width: 800px; } .menu li{ display:blo ...
几行CSS让你的页面立体起来
关注「豆皮范儿」,回复"加群" 加入我们一起学习,每天进步一点点 Hello,豆皮粉们,我来了,这回约稿又得到来自字节跳动的"米兰的小铁匠" ,几行CSS让你的 ...

html + css实现油画商场页面

html + css实现油画商场页面相关推荐

最新文章

热门文章