简单的中医药网站开发(《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文件夹里面就是图片啦

相关推荐
b1gbrother18 分钟前
让你的Claude Code变得更聪明
前端·程序员
国家不保护废物27 分钟前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户25191624271127 分钟前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny27 分钟前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
邵洛28 分钟前
前端导出excel表格并修改导出表格样式
前端
风舞28 分钟前
JavaScript 核心概念及代码示例的梳理
前端
学长学姐我该怎么办30 分钟前
从零开始学前端html篇2
前端·html
尘世中一位迷途小书童31 分钟前
从零实现 Canvas 图形拖拽:让你的网页动起来!
前端
mrsk32 分钟前
JavaScript之变量的解构赋值全面解析(●'◡'●)
前端·javascript·面试
归于尽32 分钟前
回调函数在Node.js中是怎么执行的?
前端·javascript·node.js