距离制作这个网站已经过去好久了 但是还是想记录一下 给刚开始学习web的新人提供一个小小的例子 这是我第一次接触计算机有关的代码知识 也算是自己的计算机启蒙了 大一第一学期的制成品 虽然现在看来略为简单 但是当时确确实实实实在在地码了一个月 边学边做 这个过程对于我来说 让我既开心又满足 废话不多说了 上成品
主页代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>##</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="body">
<div class="logo">
<img class="logo" src="image/logo.jpg" />
</div>
<div class="header w">
<div class="school_logo">
<img class="school_logo" src="image/学校logo.png" alt="">
</div>
<div class="nav">
<ul>
<li><a href="" target="_blank">首页</a></li>
<li><a href="https://www.zhzyw.com/zycs/" target="_blank">中医常识</a></li>
<li><a href="https://www.zhzyw.com/zyts/" target="_blank">中医特色</a></li>
<li><a href="https://www.zhzyw.com/zybj/zyys/" target="_blank">中医养生</a></li>
<li><a href="http://www.cnzyao.com/yaocai/" target="_blank">药材大全</a></li>
</ul>
</div>
<div class="search">
<input type="text" value="输入并搜索">
<button type="button">
点击搜索
</button>
</div>
</div>
<div class="banner">
<div class="banner_bloc"><img class="banner_block" src="image/left.png" alt=""></div>
<div class="banner_block">
<ul>
<li><a href="html/1.html" target="_blank">二十四节气养生之大雪养生</a></li>
<li><a href="html/2.html" target="_blank">秋季嗓子干、时痛,7款茶饮辩证用</a></li>
<li><a href="html/3.html" target="_blank">小儿推拿在7种病症中的应用</a></li>
<li><a href="html/4.html" target="_blank">骨质疏松要治更要防,骨健康不能光靠营养</a></li>
<li><a href="html/5.html" target="_blank">巧用药膳调失眠</a></li>
<li><a href="html/6.html" target="_blank">大观园"不寐之最"------林黛玉</a></li>
</ul>
</div>
</div>
<div class="bottom">
<ul>
<li>版权所有## |</li>
<li>地址:## |</li>
<li>邮编:##</li>
</ul>
</div>
</body>
</html>
css:
css
div {
white-space: nowrap;
}
.body {
min-width: 1200px;
}
.logo {
background-size: cover;
width: 100%;
height: auto;
border-radius: 10px;
}
.header {
width: 100%;
height: 60px;
border-radius: 10px 10px 0px 0px;
background-color: hsla(194, 76%, 60%, 0.897);
}
.school_logo {
float: left;
width: 15%;
height: 60px;
border-radius: 10px 0px 0px 0px;
}
.school_logo img {
width: 100%;
height: 100%;
}
.nav {
float: left;
width: 55%;
height: 60px;
}
.nav ul li {
float: left;
margin: 0 3%;
list-style: none;
}
.nav ul li a {
display: block;
text-align: center;
font-size: 22px;
color: #050505;
text-decoration: none;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
.search {
float: left;
display: flex;
width: 25%;
height: 60px;
margin: 0px 0px;
padding: 0px;
margin-left: 40px;
}
.search input {
float: left;
width: 380px;
height: 56px;
border: 1px solid #00a4ff;
border-right: 0;
color: #bfbfbf;
font-size: 18px;
padding-left: 14px;
border-radius: 10px 0px 0px 10px;
}
.search button {
font-size: 18px;
float: left;
width: 150px;
height: 60px;
border: 1px solid #00a4ff;
margin: 0px 0px;
padding: 0px;
border-radius: 0px 10px 10px 0px;
background-color: rgb(15, 125, 228);
}
.search button:hover {
background-color: rgba(76, 143, 163, 0.795);
color: azure;
}
.banner {
width: 100%;
height: 500px;
background-color: rgba(24, 124, 163, 0.274);
border-radius: 0px 0px 10px 10px;
}
.banner_block {
float: left;
width: 45%;
height: 500px;
border-radius: 0px 0px 0px 10px;
}
.banner_block ul li {
margin: 45px 100px;
text-shadow: 5px 5px 4px rgba(205, 57, 224);
}
.banner_block ul li a {
font-size: 22px;
text-decoration: none;
}
.banner ul li a:hover {
border-bottom: 2px solid #fa1515;
color: #f7121d;
}
.bottom {
float: left;
list-style: none;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 50px;
}
.bottom ul li {
float: left;
display: block;
height: 20px;
padding: 0 20px;
line-height: 60px;
font-size: 14px;
color: rgb(179, 175, 175);
text-decoration: none;
}
结构:
html文件夹里面装着的是跳转的二级页面 image文件夹里面就是图片啦