index.html
<html>
<head>
<meta charset="utf-8">
<title>商城title>
<link rel="stylesheet" type="text/css" href="market.css">
head>
<body>
<div class="header">
<div class="div1">
<span class="c">Cspan><span class="a">aspan><span class="i">ispan><span class="d">dspan><span class="o">ospan><span class="n">nspan><span class="g">gspan>
div>
<div class="div2">油画商城div>
<div class="div3">
<ul>
<a href="#"><li class="login">登录li>a>
<a href="#"><li class="regist">注册li>a>
ul>
div>
div>
<div class="fen">div>
<div class="content">
<div class="banner">
<img class="banner_img" src="img/welcome.png">
div>
<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="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li><a href="#">...a>li>
<li><a href="#">98a>li>
<li><a href="#">99a>li>
<li><a href="#">下一页a>li>
<li><a href="#">尾页a>li>
ul>
div>
div>
<div class="footer">
<p>©2019 <span>caidongspan> 前端商品展示页面 HTML CSS JavaScriptp>
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; /*字体间距*/
}