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

距离制作这个网站已经过去好久了 但是还是想记录一下 给刚开始学习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文件夹里面就是图片啦

相关推荐
FogLetter12 分钟前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
小公主25 分钟前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴28 分钟前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子39 分钟前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder1 小时前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
杨超越luckly1 小时前
HTML应用指南:利用GET请求获取全国山姆门店位置信息
信息可视化·数据分析·html·argis·门店
白白李媛媛1 小时前
vue3中实现echarts打印功能
前端·vue.js·echarts
尘心cx1 小时前
前端-HTML-day2
前端·html
歘chua1 小时前
组件封装:封装一个可复用的crud界面的思路
前端
徐小夕1 小时前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js