👧作者:大月月
📢分享知识:html+css+javascript网页制作
❌:拒绝摆烂,天天向上
网页制作之大好河山
❤希望大家多多点赞收藏哦
✏网页部分截图
🚩
🚩
🚩
🚩
✏网页部分代码
📌1.style.css
/* 1. 清除默认
--------------------------------------*/
p {
margin: 0; }
ul {
padding: 0; }
li {
list-style: none; }
a {
text-decoration: none; }
/* 2. 通用样式
--------------------------------------*/
* {
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial; }
body {
background-color: #eee; }
h1 {
font-size: 30px;
line-height: 1.5;
text-shadow: 1px 1px 1px rgba(171, 219, 249, 0.5);
margin: 0 0 10px 0;
}
h2 {
color: #909090; }
h1, h2 {
font-weight: 300; }
h2, h3, footer i {
font-size: 18px; }
p,ul {
font-size: 14px; }
#logo a {
color: #909090;
margin-left: 15px;
margin-right: 15px;
}
#logo {
font-size: 50px; }
/* 页面总容器 */
.main-container {
max-width: 1200px;
margin: 0 auto;
background: rgb(240, 241, 236);
box-shadow: 0 0 5px rgba(107, 110, 112, 0.4);
}
/* 网页中间部分 */
.content-container {
box-sizing: border-box;
max-width: 1170px;
width: 100%;
margin: 0 auto;
padding: 15px;
}
.content {
padding-top: 15px; }
.main-nav {
border-bottom: #DDDDDD 1px solid; }
.main-nav li {
margin-right: 2px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 1px 1px 1px rgba(80, 80, 80, 0.4);
}
.main-nav li a {
display: block; padding: 12px 24px; }
.main-nav li.active {
background-color: #A7DDFF; padding: 12px 24px; }
.main-nav li a:hover {
background-color: #A7DDFF; }
nav {
overflow: hidden;
padding: 20px 30px 20px 20px;
}
ul.nav {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
ul.nav li {
cursor: pointer; display: inline-block; }
ul.nav li.active {
cursor: default; }
ul.nav li, .portfolio-group .detail h3, .templatemo_form button {
text-transform: uppercase;
}
p {
line-height: 1.8em; }
a {
color: black; }
i