本文主要是介绍简单的中医药网站开发(《Web前端开发技术》网页设计),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
距离制作这个网站已经过去好久了 但是还是想记录一下 给刚开始学习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文件夹里面就是图片啦
这篇关于简单的中医药网站开发(《Web前端开发技术》网页设计)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!