505教室(浮动的练习)
2015-12-01 22:36
239 查看
主要是将一张图片一网页的显示展现出来以练习HTML5中基本样式的学习,先是图片头部的一些设计~
505.html
style.css
运行效果:
505.html
<html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>505教室</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <a class="logo" href="#"></a> <div class="nav"> <ul> <li><a class="active" href="">首页</a></li> <li><a href="">专题</a></li> <li><a href="">创新科技</a></li> <li><a href="">学堂在线</a></li> <li><a href="">论坛</a></li> </ul> </div> <div class="login"> <a class="back1" href="#">注册</a> <a class="back2" href="#">登录</a> </div> <div class="clear"></div> <div class="div1"></div> </header> <!-- <footer> 版权所有983249284098009809809809809 </footer> --> </body> </html>
style.css
@charset "utf-8"; html , body , header , a , ul , li { padding: 0; margin: 0; } ul li { list-style: none; } .clear { clear: both; } header { height: 104px; background: #40485f; } .logo { background: url(../image/logo.png); height: 60px; width: 144px; display: block; margin-top:5px; margin-left: 70px; float: left; } .login { float: right; margin-top: 16px; margin-right: 64px; } .login a { height: 42px; width: 74px; display: block; color: #fff; float: left; line-height: 42px; text-align: center; text-decoration: none; } .back1 { background: #20B5F5; } .back2 { background: #FE8500; margin-left: 20px; } .nav { float: left; margin-left: 125px; } .nav ul li { float: left; } .nav ul li a { color: #fff; font-size: 14px; text-decoration: none; display: block; height: 74px; line-height: 74px; padding: 0 25px; text-align: center; } .nav ul li a:hover , .active { background: #013057; } footer { height: 30px; background: #000; color: #fff; } .div1 { height: 30px; background: red; }
运行效果:
相关文章推荐
- 如何破解UltraEdit
- 进程与线程概述
- PMCAFF微课堂「已结束」| 测试兄弟CEO揭秘如何提高创初团队的产品质量
- 尝鲜mysql5.7.9结果root密码忘记了
- 读写bmp图片
- 数据结构之创建二叉树
- ryu的RESTAPI简介——我主要用于下发和查看流表
- YYKit的博客
- word Search
- timeSeries db之:使用Metrics监控应用程序的性能 (zz)
- 浏览器兼容的那些事(笔记)
- Android面试经验1
- 二叉搜索树(排序二叉树)
- 学习hamcrest和mockito时的总结和demo
- 正则表达式元字符
- Linux下select&poll&epoll的实现原理(一)
- 常用的算法思想总结
- ultraedit高亮显示设置
- 3644 - X-Plosives(水题,并差集)
- jQuery 简单笔记