效果图：

html:

<!DOCTYPE html>
<html lang="zh-Hans">
<head><title>实验四</title><meta charset="utf-8"><link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="page_header"><img src="data:images/建大校徽.png" alt="建大校徽"><h1>建大新闻</h1><input type="text" placeholder="搜索新闻">
</header>
<main class="clearfix"><aside><nav><ul><li><a href="#">新闻首页</a></li><li><a href="#">新闻头条</a></li><li><a href="#" title="建大要闻">建大要闻</a></li><li><a href="#" title="图片新闻">图片新闻</a></li><li><a href="#" title="媒体建大">媒体建大</a></li><li><a href="#" title="部门传真">部门传真</a></li><li><a href="#" title="院系经纬">院系经纬</a></li><li><a href="#" title="工作导航">工作导航</a></li><li><a href="#" title="学术动态">学术动态</a></li><li><a href="#" title="筑基讲坛">筑基讲坛</a></li><li><a href="#" title="建大校报">建大校报</a></li><li><a href="#" title="通知公告">通知公告</a></li><li><a href="#" title="学术文化">学术文化</a></li><li><a href="#" title="宣传部通知公告">宣传部通知公告</a></li></ul></nav></aside><article><div class="row clearfix"><section><header><h2>学校新闻1</h2><span>more</span></header><ul><li><a href="#">我校教师参加全国教学质量保障体系建设报告会</a></li><li><a href="">我校任瑞波教授获批2016年度享受政府特殊津贴专家</a></li><li><a href="">副校长范存礼出席法学院检校共建实践教学基地揭牌仪式</a></li><li><a href="">济宁职业技术学院副院长杨国峰一行莅临我校考察交流</a></li><li><a href="">我校举办教学管理工作人员培训会</a></li><li><a href="">我校交通工程学院与青海省海北州交通运输局联合举办公路工程技术培训班</a></li></ul></section><section><header><h2>学校新闻2</h2><span>more</span></header><ul><li><a href="#">我校教师参加全国教学质量保障体系建设报告会</a></li><li><a href="">我校任瑞波教授获批2016年度享受政府特殊津贴专家</a></li><li><a href="">副校长范存礼出席法学院检校共建实践教学基地揭牌仪式</a></li><li><a href="">济宁职业技术学院副院长杨国峰一行莅临我校考察交流</a></li><li><a href="">我校举办教学管理工作人员培训会</a></li><li><a href="">我校交通工程学院与青海省海北州交通运输局联合举办公路工程技术培训班</a></li></ul></section></div><section class="banner"><img src="data:images/华表1.png" alt="华表">走进新时代 开启新征程</section><div class="row"><section><header><h2>学校新闻3</h2><span>more</span></header><ul><li><a href="#">我校教师参加全国教学质量保障体系建设报告会</a></li><li><a href="">我校任瑞波教授获批2016年度享受政府特殊津贴专家</a></li><li><a href="">副校长范存礼出席法学院检校共建实践教学基地揭牌仪式</a></li><li><a href="">济宁职业技术学院副院长杨国峰一行莅临我校考察交流</a></li><li><a href="">我校举办教学管理工作人员培训会</a></li><li><a href="">我校交通工程学院与青海省海北州交通运输局联合举办公路工程技术培训班</a></li></ul></section><section><header><h2>学校新闻4</h2><span>more</span></header><ul><li><a href="#">我校教师参加全国教学质量保障体系建设报告会</a></li><li><a href="">我校任瑞波教授获批2016年度享受政府特殊津贴专家</a></li><li><a href="">副校长范存礼出席法学院检校共建实践教学基地揭牌仪式</a></li><li><a href="">济宁职业技术学院副院长杨国峰一行莅临我校考察交流</a></li><li><a href="">我校举办教学管理工作人员培训会</a></li><li><a href="">我校交通工程学院与青海省海北州交通运输局联合举办公路工程技术培训班</a></li></ul></section></div></article>
</main>
<footer>&copy; 山东建筑大学<br>地址：山东省济南市临港开发区凤鸣路<br>邮编：250101<br>
</footer>
<div class="fixed"><img src="data:images/like.svg" alt="点赞~" srcset="" width="32px"><img src="data:images/email.svg" alt="联系~" srcset="" width="32px">
</div>
</body>
</html>

css:

* { margin: 0; padding: 0; }
html { font: 16px/1 '宋体'; }
.clearfix::after {content: " ";display: block;clear: both;height: 0;overflow: hidden;
}
ul { list-style: none; }
.page_header {height: 120px;border-bottom: 2px solid #1976D2;margin-bottom: 1rem;
}
.page_header img {float: left;width: 90px;padding: 15px
}
.page_header h1 {line-height: 120px;font: normal 3em/120px 'Microsoft YaHei';letter-spacing: .2em;display: inline;
}
.page_header input {float: right;border-top: 0;border-left: 0;border-right: 0;border-bottom: 1px solid #666;outline: 0;padding: 0.2em 0.2em 0.2em 1.4em;margin: 15px;background-image: url(../images/magnifier-tool.svg);background-repeat: no-repeat;background-size: 1.0em;background-position: left center;
}
.page_header input:focus {border-bottom: 1px solid rgb(4, 123, 221);
}
main > aside {float: left;width: 15%;
}
main > article {float: left;width: calc(85% - 1px);border-left: 1px solid #ccc;
}
aside > nav {width: 8rem;margin: 2em auto;
}
aside li {padding: .3em 0;
}
nav ul li::before {content: ' ';display: inline-block;width: 0.3em;height: 0.3em;overflow: hidden;margin-right: 0.5em;vertical-align: .15em;border-top: 1px dotted #1976D2; /* 设置上边框 */border-right: 1px dotted #1976D2; /* 和下边框 */transform: rotate(45deg); /* 然后旋转 45 度 */
}
aside a {color: #333;font: 1em 'Dengxian', '华文细黑';text-decoration: none;
}
aside a:hover {color: #1976D2;text-decoration: underline;
}
footer {font: .75rem/1.5 '宋体';margin-top: 1rem;padding: 1rem;clear: both;color: rgb(224, 237, 255);background-color: rgb(31, 153, 235);border-top: 2px solid #1976D2;
}
.row {padding: 1em;clear: both;
}
.row section {float: left;/* -0.5px用于修正Edge等浏览器的舍入误差 */width: calc(50% - .5em - .5px); min-width: 350px;
}
.row section:first-child {margin-right: 1rem;
}
article header {height: 2rem;border-bottom: 2px solid #1976D2;
}
article header h2 {float: left;  font: normal 1.5rem 'Dengxian', '华文细黑';
}
article header span {font: .75rem/1 Arial, sans-serif;float: right;color: #ccc;margin-top: .75rem;padding-right: .5em;margin-right: .5em;vertical-align: bottom;border-right: .2em #ccc dotted;
}
article li {padding: .5em 1px;
}
article li:not(:last-child) {border-bottom: 1px #ccc dotted;
}
article a {display: block;width: 100%;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #333;text-decoration: none;
}
article a:hover {color: darkorange;text-decoration: underline;
}
.banner {min-height: 20px;margin: 1rem;padding: 0.5em;background: rgb(230, 17, 17);color: rgb(248, 231, 76);font: 3vw 幼圆;letter-spacing: 0.5em;text-align: center;text-shadow: .1vw .1vw  rgba(0, 0, 0, 0.5);position: relative;
}
.banner img {position: absolute;right: 3vw;bottom: .5em;width: 12vw
}
.fixed {width: 32px;height: 64px;position: fixed;bottom: 0;right: 0;
}

html+css设计页面相关推荐

css设计软件dw,教你在Dreamweaver中使用CSS设计布局
烈火建站学院(LieHuo.Net)网页制作文档本文介绍如何在Dreamweaver 中使用层叠样式表 (CSS) 设计页面中的文本格式.您可以使用 CSS 以 HTML 无法提供的方式来设计文本格式 ...
CSS设计指南---页面布局
CSS设计指南-页面布局教材:CSS设计指南实现多栏布局三种方案: 固定宽度:固定宽度布局的大小不会随用户调整浏览器窗口大小而变化,一般是 900 到1100像素宽. 流动: 流动布局的大小会随 ...
php用户注册功能设计,利用HTML+CSS设计一个简单的用户注册页面【示例】
本篇文章将要给新手小白们介绍如何使用HTML和css制作简单的注册页面.在开发网站过程中,如果网站内容要求是完善的信息站,那么肯定就离不开用户注册的这个功能.这个用户注册界面对于刚入门的前端新手来说, ...
28款网页CSS设计工具和生成器
丰富多样的网络工具和资源的出现,使网页设计变得轻松而简单.介绍 28 款在线工具和生成器,以帮助你更快捷方便地设计页面. 1. Lorem Ipsum Generator – 多功能的在线文本编辑工具 ...
《PHP求职宝典》--Web设计页面笔记
偶然间在图书馆看见这本书,名字很吸引人,果然不错,许多细节以前没在意,但是确实值得注意一下.先分享一下Web设计页面的内容.可能对比较独到的程序员来说比较弱智,不过只针对可以对那些有帮助的程序猿而言分 ...
结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现
在Web标准中一个很重要的概念就是强调页面的结构与表现分离.说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式.一旦一个标准的XHT ...
[css] 在页面中的应该使用奇数还是偶数的字体？为什么呢？
[css] 在页面中的应该使用奇数还是偶数的字体?为什么呢? 常用偶数号字体,但奇数号字体也没关系,例如知乎正文使用15px字体,豆瓣电影使用13px字体UI设计师导出的设计稿一般都是偶数号字体偶数 ...
CSS设计指南（第3版）pdf
下载地址:网盘下载 <图灵程序设计丛书:CSS设计指南(第3版)>是一本面向初中级读者的经典设计指南.全书共分8章,前4章分别介绍了HTML标记和文档结构.CSS工作原理.定位元素.字体和 ...
CSS设计指南(第3版)
<CSS设计指南(第3版)> 基本信息原书名:Stylin'with CSS:a designer's guide 作者: (英)Charles Wyke-Smith 译者: 李松峰丛 ...

html+css设计页面

目录

效果图：

html:

css:

html+css设计页面相关推荐

最新文章

热门文章