CSS基础(二)--盒模型与浮动练习
来源:互联网 发布:snmp trap 端口号 编辑:程序博客网 时间:2024/06/07 20:51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .header{ width: 970px; height: 103px; /*居中,这个语句今天没讲,你照抄,就是居中:*/ margin: 0 auto; } .header .logo{ float: left; width: 277px; height: 103px; background-color: red; } .header .language{ float: right; width: 137px; height: 49px; background-color: green; margin-bottom: 8px; } .header .nav{ float: right; width: 679px; height: 46px; background-color: green; } .content{ width: 970px; height: 435px; /*居中,这个语句今天没讲,你照抄,就是居中:*/ margin: 0 auto; margin-top: 10px; } .content .banner{ float: left; width: 310px; height: 435px; background-color: gold; margin-right: 10px; } .content .rightPart{ float: left; width: 650px; height: 435px; } .content .rightPart .main{ width: 650px; height: 400px; margin-bottom: 10px; } .content .rightPart .links{ width: 650px; height: 25px; background-color: blue; } .content .rightPart .main .news{ float: left; width: 450px; height: 400px; } .content .rightPart .main .hotpic{ float: left; width: 190px; height: 400px; background-color: purple; margin-left: 10px; } .content .rightPart .main .news .news1{ width: 450px; height: 240px; background-color: skyblue; margin-bottom: 10px; } .content .rightPart .main .news .news2{ width: 450px; height: 110px; background-color: skyblue; margin-bottom: 10px; } .content .rightPart .main .news .news3{ width: 450px; height: 30px; background-color: skyblue; } .footer{ width: 970px; height: 35px; background-color: navy; /*没学,就是居中:*/ margin: 0 auto; margin-top: 10px; } </style></head><body> <!-- 头部 --> <div class="header"> <div class="logo">logo</div> <div class="language">语言选择</div> <div class="nav">导航条</div> </div> <!-- 主要内容 --> <div class="content"> <div class="banner">大广告</div> <div class="rightPart"> <div class="main"> <div class="news"> <div class="news1"></div> <div class="news2"></div> <div class="news3"></div> </div> <div class="hotpic"></div> </div> <div class="links"></div> </div> </div> <!-- 页尾 --> <div class="footer"></div></body></html>
阅读全文
0 0
- CSS基础(二)--盒模型与浮动练习
- CSS基础(二)--盒模型与浮动
- CSS浮动与盒模型知识点
- css的布局模型(二)---浮动模型
- CSS 基础点集锦一:盒子模型、浮动、清除浮动
- CSS基础二:CSS模型
- CSS笔记(盒子模型与浮动)
- css盒子模型与div浮动详解
- CSS布局模型(二)——浮动模型
- css浮动一个练习
- CSS浮动与定位(二)
- 前端基础与CSS中的浮动
- 盒模型与浮动布局
- 读书笔记--精通CSS高级Web标准解决方案(三)---CSS盒模型、浮动与定位
- CSS基础之盒子模型及浮动布局
- css盒模型基础
- CSS浮动之二
- css浮动与清除浮动
- [agc015d]A or...or B Problem
- hashMap非线程安全问题和concurrenthashmap线程安全的比较
- gson转json格式
- centos 安装 docker docker-compose
- 入门机器学习,必须掌握这些数据技能
- CSS基础(二)--盒模型与浮动练习
- 上台阶,来自赛码网,初级动态规划算法
- 欢迎使用CSDN-markdown编辑器
- Cloud郵便番号API
- linux命令之rpm
- php栈和队列
- hdu 6005 Pandaland(dij+暴力)
- 爬虫学习笔记--Selenium PhantomJS
- json介绍