商城--慕课网
1.页眉和beaner
margin
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="css\common.css"><script type="text/javascript" src="js\js1.js"></script>
</head>
<body><div class="header"><div class="logo"><img src="image\logo.png"></div><div class="menu" onclick="show_menu()" onmouseleave="show_menu1()"><div class="menu_title" ><a href="###">内容分类</a></div><ul id="title"><li>现实主义</li><li>抽象主义</li></ul></div><div class="auth"><ul><li><a href="#">登录</a></li><li><a href="#">注册</a></li></ul></div></div><div class="content"><div class="banner"><img src="image/welcome.png" class="banner-img"></div></div><div class="footer"></div>
</body>
</html>
css
*{padding: 0px;margin: 0px;
}
body {font-size: 14px;}.header{margin:25px auto;width: 1200px;
}.header .menu ul{display: none;list-style: none;position: absolute;width: 80px;opacity: 0.5;background-color: white;
}.header .menu .menu_title{border-bottom: 1px solid black;padding-bottom: 20px;width: 80px;text-align: center;
}a{text-decoration: none;color: black;
}.header .menu ul li{margin-top: 20px;text-align: center;
}
.header .logo{float: left;position: relative;
}.header .menu{float: left;position: relative;margin-top:12px;margin-left:16px;}
.header .auth {margin-top:12px;float: right;}
.header .auth ul li {float: left;margin-right: 50px;list-style: none}.content{width: 1200px;margin:25px auto;
}.content .banner .banner-img{margin-top: 20px;
}
js
var flag=false//全局变量
function show_menu(){var title1=document.getElementById("title");if(flag){title1.style.display="none";flag=false;}else{title1.style.display="block";flag=true;}
}
function show_menu1(){var title1=document.getElementById("title");title1.style.display="none";flag=false;
}正文
列表图片排版设置
圆角设置
变宽的设置
边框格式1:阴影
可以理解为灯光在中心，移动到不同的相线所投射出的阴影
.content .img-content ul li{width: 360px;float:left;margin:0 60px 60px 0;list-style: none;/*设置边框等格式*/margin-top:30px;height: 500px;/* 阴影*/box-shadow: 0px 0px 3px 3px #ccc;-webkit-box-shadow: 0px 0px 3px 3px #ccc;/*谷歌浏览器*/-moz-box-shadow: 0px 0px 3px 3px #ccc;/*火狐*/background-color:#FFFFFF;
}
边框2
页脚
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！