用HTML和CSS制作一个网页

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 去除浏览器默认样式 */* {padding: 0px;margin: 0px;}/* 顶部线条 */.top_line {width: 1200px;height: 2px;background-color: cornflowerblue;margin: 0px auto;}/* logo广告区域 */.logo_area {width: 1200px;margin: 5px auto;}.logo_area_left,.logo_area_center,.logo_area_right {height: 80px;float: left;}/* logo广告区域左侧 */.logo_area_left {width: 250px;background-color: antiquewhite;background-image: url(img/logo.png);background-repeat: no-repeat;background-position: center;}/* logo广告区域中间 */.logo_area_center {width: 700px;}/* logo广告区域右侧 */.logo_area_right {line-height: 80px;width: 250px;text-align: center;background-color: antiquewhite;}/* logo广告区域右侧文字修饰 */.logo_area_right_login_reg {text-decoration: none;color: blue;font-weight: bold;}/* 导航栏 */.dh_menu {margin: 10px auto;width: 1200px;}/* 导航菜单 */.menu {width: 171.428px;font-size: 20px;float: left;background-color: cornflowerblue;color: white;padding: 10px 0px;text-align: center;margin-top: 10px;}/* 移入菜单伪类 */.menu:hover {background-color: ghostwhite;color: black;}/* 湖院广告 */.hu_adver {width: 1200px;margin: auto;}/* 内容区 */.content {width: 1200px;height: 500px;background-color: #F8F8FF;margin: auto;}/* 内容区类型 */.type {width: 380px;height: 195px;background-color: bisque;float: left;}/* 内容区类型导航 */.content_type_dh {height: 57px;border-bottom: cornflowerblue 3px solid;}/* 内容区类型文字内容 */.content_type_word {height: 42px;line-height: 45px;padding-left: 15px;border-bottom: gray 3px dashed;}/* 内容区类型文字内容左浮动 */.content_type_dh_leftfu {width: 80px;color: white;background-color: cornflowerblue;float: left;font-size: 20px;text-align: center;line-height: 60px;}/* 内容区类型文字内容右浮动 */.content_type_dh_rightfu {float: right;font-size: 15px;line-height: 60px;}/* 友情链接 */.link {width: 1200px;height: 90px;margin: 5px 0px;background-color: bisque;}/* 友情链接文字 */.link_word {width: 100px;height: 50px;color: white;background-color: cornflowerblue;text-align: center;line-height: 50px;}/* 友情链接下面的蓝色分割线 */.blue_line {border-bottom: cornflowerblue 3px solid;}/* 商标文字 */.sb_word {text-align: center;text-decoration: none;color: black;}/* 设置超链接为正常字体 */a {text-decoration: none;}</style></head><body><!-- 顶部线条 --><div class="top_line"></div><!-- logo广告区域 --><div class="logo_area"><!-- logo广告区域左侧 --><div class="logo_area_left"></div><!-- logo广告区域中间 --><div class="logo_area_center"><img src="img/tim.jpg"></div><!-- logo广告区域右侧 --><div class="logo_area_right"><a href="登录界面.html" class="logo_area_right_login_reg">登录</a><a href="注册界面.html" class="logo_area_right_login_reg">注册</a></div></div><!-- 导航栏 --><div class="dh_menu"><div class="menu">网站首页</div><div class="menu">学校概况</div><div class="menu">教学单位</div><div class="menu">机构设置</div><div class="menu">人才培养</div><div class="menu">学术研究</div><div class="menu">招生就业</div><div style="clear: left;"></div></div><!-- 湖院广告 --><div class="hu_adver"><img src="img/timg.gif"></div><!-- 内容区 --><div class="content"><div class="type"><div class="content_type_dh"><!-- 内容区类型文字内容左浮动 --><div class="content_type_dh_leftfu">唐诗</div><!-- 内容区类型文字内容右浮动 --><div class="content_type_dh_rightfu">更多>></div></div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div></div><div class="type" style="margin:0px 30px"><div class="content_type_dh"><div class="content_type_dh_leftfu">唐诗</div><div class="content_type_dh_rightfu">更多>></div></div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div></div><div class="type"><div class="content_type_dh"><div class="content_type_dh_leftfu">唐诗</div><div class="content_type_dh_rightfu">更多>></div></div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div></div><div class="type" style="margin-top:10px ;"><div class="content_type_dh"><div class="content_type_dh_leftfu">唐诗</div><div class="content_type_dh_rightfu">更多>></div></div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div></div><div class="type" style="margin:10px 30px 0px 30px"><div class="content_type_dh"><div class="content_type_dh_leftfu">唐诗</div><div class="content_type_dh_rightfu">更多>></div></div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div></div><div class="type" style="margin-top: 10px;"><div class="content_type_dh"><div class="content_type_dh_leftfu">唐诗</div><div class="content_type_dh_rightfu">更多>></div></div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div><div class="content_type_word">静夜思</div></div><div style="clear: left;"></div><!-- 友情链接 --><div class="link"><!-- 友情链接下面的蓝色分割线 --><div class="blue_line"><div class="link_word">友情链接</div></div><div style="clear: left;"></div><div><a href="www.baidu.com"style="text-decoration: none;line-height: 40px;text-align: center;font-size: 20px;color: black;"target="_blank">百度</a></div></div></div><!-- 分割线 --><div style="width: 1200px;height: 5px;background-color: red;margin: auto;"></div><!-- 商标文字 --><span class="sb_word" style="display: block;"><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">Power by 陕ICP备12345678号</a></span></body>
</html>

用HTML和CSS制作一个网页相关推荐

九宫格——用html+css制作一个网页
自用(仅供参考,如有错误欢迎指出) 要求: 1.通过html和css制作一个可以根据页面缩放进行变化的九宫格. 2.并且可以通过手机浏览器访问. 过程: 1.网页制作先不管通过网页访问这一项,先写一 ...
【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...
【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
HTML5 + CSS制作一个网络照片墙
使用HTML5 + CSS制作一个照片墙是不难的,在大学里可以当作业交了,这是效果: 这个是有动画的,具体的效果在这个网站的home页,Welcome的源码参考了用html做一个漂亮的网站,个人网页, ...
在html中怎么制作友情链接,如何制作一个网页链接，用描文本、友情链接交易方式教你如何制作？...
如何制作一个网页链接,用描文本.友情链接交易方式教你如何制作?作为seo优化人员如何运用外界链接开展百度搜索引擎提升?下面和小编一起看看! 1.锚点链接链接应该是有关的优先,百度搜索引擎提升锚点链接 ...
HTML+CSS制作一个动画
HTML+CSS制作一个动画效果图如下: HTML部分结构如下: <!DOCTYPE html> <html lang="zh-Hans"><hea ...
使用html和css制作一个小米商城页面
使用html和css制作一个小米商城页面创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 10/01 14:32 * / `<html>&l ...
记录html+css制作一个上下跳动效果的动画
需求想用html+css制作一个上下跳动效果的动画,然后记录一下代码,方便今后使用. 实例代码 <!DOCTYPE html > <html><head>< ...
用HTML+css制作一个动态的天气图标
前言本文讲解用HTML+css制作一个动态的天气图标,如果觉得对你有帮助请关注小编,你的支持就是我更新的动力! 成品展示: 本程序是一个动态的一.HTML部分 <!DOCTYPE html& ...

用HTML和CSS制作一个网页

用HTML和CSS制作一个网页相关推荐

最新文章

热门文章