效果图：

HTML：

<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>St Huxley's Community College</title><link href="index.css" type="text/css" rel="stylesheet" /></head><body><header><h1>St Huxley's Community College</h1></header><section><h2>Brave new world</h2><p>It's a brave new world out there. Our children are being put inincreasing more competitive situations, both during recreation, and asthey start to move into the adult world of<a href="https://en.wikipedia.org/wiki/Examination">examinations</a>,<a href="https://en.wikipedia.org/wiki/Jobs">jobs</a>,<a href="https://en.wikipedia.org/wiki/Career">careers</a>, and otherlife choices. Having the wrong mindset, becoming<a href="https://en.wikipedia.org/wiki/Emotion">too emotional</a>, ormaking the wrong choices can contribute to them experiencing difficultyin taking their rightful place in today's ideal society.</p><p>As concerned parents, guardians or carers, you will no doubt want togive your children the best possible start in life — and you've come tothe right place.</p><h2>The best start in life</h2><p>At St. Huxley's, we pride ourselves in not only giving our students atop quality education, but also giving them the societal and emotionalintelligence they need to win big in the coming utopia. We not onlyexcel at subjects such as genetics, data mining, and chemistry, but wealso include compulsory lessons in:</p><ul><li>Emotional control</li><li>Judgement</li><li>Assertion</li><li>Focus and resolve</li></ul><p>If you are interested, then you next steps will likely be to:</p><ol><li><a href="#">Call us</a> for more information</li><li><a href="#">Ask for a brochure</a>, which includes signup form</li><li><a href="#">Book a visit</a>!</li></ol></section><aside><h2>Top course choices</h2><ul><li><a href="#">Genetic engineering</a></li><li><a href="#">Genetic mutation</a></li><li><a href="#">Organic Chemistry</a></li><li><a href="#">Pharmaceuticals</a></li><li><a href="#">Biochemistry with behaviour</a></li><li><a href="#">Pure biochemistry</a></li><li><a href="#">Data mining</a></li><li><a href="#">Computer security</a></li><li><a href="#">Bioinformatics</a></li><li><a href="#">Cybernetics</a></li></ul><p><a href="#">See more</a></p></aside><nav><ul><li><a href="#">Home</a></li><li><a href="#">Finding us</a></li><li><a href="#">Courses</a></li><li><a href="#">Staff</a></li><li><a href="#">Media</a></li><li><a href="#">Prospectus</a></li></ul></nav><footer><p>&copy; 2016 St Huxley's Community College</p></footer></body>
</html>

CSS：

/* General setup */* {box-sizing: border-box;
}body {margin: 0 auto;min-width: 1000px;max-width: 1400px;
}/* Layout */section {float: left;width: 50%;
}aside {float: left;width: 30%;
}nav {float: left;width: 20%;
}footer {clear: both;
}header,
section,
aside,
nav,
footer {padding: 20px;
}/* header and footer */header,
footer {border-top: 5px solid #a66;border-bottom: 5px solid #a66;
}/* WRITE YOUR CODE BELOW HERE */
/* ||设置header的字体 */
header {font-family: sans-serif;
}/* ||设置body的字体和样式 */
body {font-family: serif;line-height: 1.5;letter-spacing: 0.1em;word-spacing: 0.2em;
}/* ||设置全站网页 font-size 为 10px。 */
html {font-size: 10px;
}/* ||设置各个元素的字体大小 */
h1 {font-size: 4em;text-align: center;letter-spacing: 0.2em;
}h2 {font-size: 2.5em;
}p {font-size: 1.5em;
}section h2 + p {text-indent: 20px;
}/* ||设置超链接的样式（顺序：L,V,F,H,A） 记忆：LoVe Fears HAte */
a {padding: 2px 1px 0;
}a:link {color: #a66;
}a:visited {color: #a66;
}a:focus {color: #a66;text-decoration: none;outline: none;
}a:hover {color: #a66;text-decoration: none;
}a:active {background-color: antiquewhite;color: #a00;
}/* ||设置section下紧挨着h2的p元素里面的a的样式 */
section h2 + p a {padding: 2px 16px 0 1px;background: url("lianjie.png") 100% 0 no-repeat;
}/* ||去掉默认的黑点 */
ul {list-style-type: none;
}/* ||设置section,aside中li的样式 */
section ul li,
aside ul li {padding-left: 2rem;background-position: 0 0;background-size: 1.6rem 1.6rem;background-repeat: no-repeat;
}section ul li {background-image: url("orange.png");
}aside ul li {background-image: url("star.png");
}/* ||设置nav中a的样式 */
nav ul li a {text-decoration: none;display: block;width: 20rem;height: 8rem;border: 1px solid #a66;margin: 2rem 0;text-align: center;line-height: 8rem;font-size: 2rem;font-weight: bold;
}nav ul li a:hover {background-color: antiquewhite;
}

MDN-CSS-排版社区大学首页相关推荐

css 排版_Web排版的未来：CSS字体4级
css 排版 Web字体为设计注入了生命,帮助我们避免了在Web设计初期广泛使用的系统默认设置. 当今有许多可用的选项,我们有很多技巧可以提供和设置自定义字体. CSS字体模块的第4级概述了您会喜欢的 ...
使用html+css+js制作小米首页
文章目录使用html+css+js制作小米首页 1.html制作小米官网页面结构(`index.html`) 2.使用css设置公共样式(`base.css`) 3.使用css设置页面元素样式(`i ...
H5+css : 360商城的首页布局模拟
H5+css : 360商城的首页布局模拟因为360商城页面过长,商品分类页面只选择了一个页面做一下实现.且只做了基本的布局和鼠标悬停效果 <!DOCTYPE html> <htm ...
Bucking the stigma (留学生请摘掉有色眼镜看社区大学)
Many Chinese students second-guess the benefits of attending a US community college. 很多中国学生对去美国社区大学学 ...
CSS仿艺龙首页鼠标移入图片放大
CSS仿艺龙首页鼠标移入图片放大,效果似乎没有js好...... <!DOCTYPE html> <html lang="en"> <head> ...
CSS排版练习小作业，文字围绕图片显示，基本的float浮动定位
简单的css排版基本的float浮动定位文字围绕图片显示 css代码,float分成两块 <style type="text/css">div.float1{flo ...
从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
CSS类似微软中国首页的竖向选项卡
效果体验: http://hovertree.com/texiao/css/24/ 源码下载: http://hovertree.com/h/bjaf/hardklps.htm 代码如下: <! ...
社区大学--另一个进入名牌大学的途径
美国的"社区大学"越来越多的高中生与家长们的热门词汇.而以前,中国学生和家长几乎对美国社区大学闻所未闻.如今,进入美国社区大学的中国大学本科生也愈来愈多,远远超过了那些直接进入美国 ...

MDN-CSS-排版社区大学首页

效果图：

HTML：

CSS：

MDN-CSS-排版社区大学首页相关推荐

最新文章

热门文章