<!DOCTYPE html>
<html>
<head>
<title>晨钟文学社</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="keywords" content="晨钟文学社,文学社，河北工程大学">
<meta name="description" content="河北工程大学晨钟文学社，推崇在娱乐至死、快餐娱乐的时代，尝试安静的感受生活。静心、读书、学习、成长。">
<meta name="author" content="敖无虚">
<link rel="icon" href="晨钟文学社.jpg" type="image/x-icon">
</head>
<style>
body {
margin: 0em;
}
header {
display: flex;
width: 100%;
height: 15% ;
min-width: 15em;
}
nav {
background-color: rgb(197, 218, 240);
min-width: 15em;
height: 10%;
}
header div {
width: 50%;
}
h1 {
font-size: 0.68em;
margin: auto;
color: rgb(142, 236, 142);
padding: 2%;
padding-left: 40%;
min-width: 8em;
}
header ul {
display: inline-flex;
margin-top: 0;
list-style-type: none;
width: 100%;
height: 100%;
margin-bottom: 0em;
margin: 0em;
}
header div ul {
margin: auto;
}
ul:first-of-type {
padding: 0em;
height: 100%;
width: 100%;
}
ul:first-of-type p a {
font-size: 3.25em;
margin-top: 0em;
margin-left: 3em;
color: black;
min-width: 4em;
}
ul:first-of-type p input {
width: 60%;
height: 6%;
font-size: 2.5em;
margin: 0em;
min-width: 4em;
}
p#2,
p#3 {
padding-left: 2em;
}
header ul li {
width: 33.333%;
padding: 0em;
font-size: 0.5em;
margin: 0em;
margin-top: 1em;
min-width: 4em;
}
ul:first-of-type p {
padding: 0em;
margin: 0em;
font-size: 0.25em;
width: 100%;
display: flex;
}
span {
font-size: 3.25em;
padding: 0em;
margin-top: 0em;
color: black;
min-width: 2em;
}
ul li a {
font-size: 0.4em;
color: black;
}
nav ul li {
line-height: 0.5em;
text-align: center;
}
nav ul {
padding-bottom: 1em;
justify-content: center;
display: flex;
list-style-type: none;
margin: auto;
}
.small {
width: 6%;
min-width: 1em;
}
.lang {
width: 9%;
min-width: 2em;
}
.mid {
width: 8%;
min-width: 1.5em;
}
main {
width: 60%;
height: 20em;
background-color: tomato;
margin: auto;
}
main img {
width: 100%;
height: 25%;
}
</style>
<body>
<!--header模块儿，最左边为晨钟文学社和图标，最右边为登录和注册链接-->
<header>
<div>
<h1>晨钟文学社</h1>
</div>
<div>
<ul>
<li>
<p><input type="search">
<span>搜索</span>
</p>
</li>
<li>
<p id="2"><a href="">登录</a></p>
</li>
<li>
<p id="3"><a href="">注册</a></p>
</li>
</ul>
</div>
</header>
<nav>
<ul>
<li class="small"><a href="">首页</a></li>
<li class="mid"><a href="">论道场</a></li>
<li class="lang"><a href=""> 长篇小说</a></li>
<li class="lang"><a href=""> 短篇小说</a></li>
<li class="mid"><a href="">鬼故事</a></li>
<li class="small"><a href="">散文</a></li>
<li class="small"><a href="">诗歌</a></li>
<li class="small"><a href="">其他</a></li>
</ul>
</nav>
<main>
<img src="背景16.jpg" alt="不见啦">
</main>
</body>
</html>
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-8-9 22:13:39
置顶卡
千斤顶
显身卡
楼主
发表于 2020-8-9 22:14:56
发表于 2020-8-11 08:39:24
