简单的中医药网站开发（《Web前端开发技术》网页设计）

最新推荐文章于 2024-07-23 12:36:06 发布

大晴的上分之旅

最新推荐文章于 2024-07-23 12:36:06 发布

阅读量397

点赞数 5

文章标签：前端课程设计 html css

本文链接：https://blog.csdn.net/snowy_and_sunny/article/details/137751058

版权

距离制作这个网站已经过去好久了但是还是想记录一下给刚开始学习web的新人提供一个小小的例子这是我第一次接触计算机有关的代码知识也算是自己的计算机启蒙了大一第一学期的制成品虽然现在看来略为简单但是当时确确实实实实在在地码了一个月边学边做这个过程对于我来说让我既开心又满足废话不多说了上成品

主页代码：

<!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：

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文件夹里面就是图片啦

大晴的上分之旅

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单的中医药网站开发（《Web前端开发技术》网页设计）

距离制作这个网站已经过去好久了但是还是想记录一下给刚开始学习web的新人提供一个小小的例子这是我第一次接触计算机有关的代码知识也算是自己的计算机启蒙了大一第一学期的制成品虽然现在看来略为简单但是当时确确实实实实在在地码了一个月边学边做这个过程对于我来说让我既开心又满足废话不多说了上成品。html文件夹里面装着的是跳转的二级页面 image文件夹里面就是图片啦。
复制链接

扫一扫