css重点章节复习—布局-边框-边距-浮动 (部分)
css重点章节复习—布局-边框-边距-浮动
在第二个任务中,这一块的后面那条线真的弄了很久。起初也是在html里面写的代码。之后觉得这样不好,想到第一个页面中用到的border-bottom和border-top就觉得这里应该可以用border-left或者border-right 就使用了。但是出现一个问题就是不管我怎么调,整条线都是从上画到下,不能合顶部底部的两条线分开。还好记得书本里面有一处是将将垂直线和上下部分开的。查了一下,竟然是用paddding。就觉得很震惊。原来那些margin 、padding 、border,我还不是很会用,现在就专门来复习一下这一块的内容。
还有浮动之前一直都是用的display:inline-bloc;这个会有个问题,就是它会自动产生间距,目前我还不知道怎么消除这个自动产生的间距。
现在用float。不会产生间距,而且很多地方都可以用到。自己的基础知识还是很欠缺的,基础太薄弱。
border-margin-padding-float
border 用于线条:在第一个页面中,绿色的线一开始是用一个div来包住的,但是这样会增加html代码,代码量无故增多。只需在css样式里面对它添加一个border-bottom就ok了。有时候是top还是bottom还是要经过考虑的。虽然都是可以实现的,但是意义不一样。
.green-line{ padding: 4px 8px; border-bottom: 1px solid #6bc30d; display: inline-block; } |
margin用于隔开不同元素
.main-content{ height:267px; min-width: 988px; background-color:#f3f3f3; margin: 0 auto; margin-bottom: 42px; } |
padding 设置内边距
.header-links{ float: left; padding:12px; } 该段代码解决了本文一开始提出来的问题,分开垂直线和水平线 |
float
.header-phone span{ float: left; position: relative; left: 25px; } |
用float默认该元素为块级元素。比设置display:block;/inline-block;好用,不会产生不必要的间距。
书本《html与css3基础教程》(第8版) 11章:用css进行布局
版权声明:未经作者同意,不得私自转载。http://www.cnblogs.com/lal-fighting/
css重点章节复习—布局-边框-边距-浮动 (部分)的更多相关文章
- 0019 盒子模型(CSS重点):边框、内外边距、布局稳定性、PS
typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...
- .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
- HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
- 前端总结·基础篇·CSS(一)布局
目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...
- 【转载】CSS + DIV 实现整理布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- HTML CSS + DIV实现整体布局 part1
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
随机推荐
- JavaScript学习笔记- 自定义滚动条插件
此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...
- VI命令----用于检索
装了个虚拟机Ubuntu,命令行模式用VI很不适应,需要学习! 1.vi 模式切换: Commond模式: 打开文件的默认模式,用ESC建切换到此模式 Insert模式: 按键:i 在光标前输入 a ...
- 如何删除GIT中的.DS_Store
.DS_Store 是什么 使用 Mac 的用户可能会注意到,系统经常会自动在每个目录生成一个隐藏的 .DS_Store 文件..DS_Store(英文全称 Desktop Services Stor ...
- 10-xargs 简明笔记
从标准你输入获取内容创建和执行命令 xargs [options] 选项 -n 数字,分组 示例 x ...
- VS2013 无法在Web服务器上启动调试。IIS未列出与打开的URL匹配的网站。
出现这个问题的原因是:没有用管理员权限运行VS2013. 本来遇到这个问题的时候,不知道什么原因.后来附加到进程调试的时候,提示要以管理员身份运行.才知道啥原因.
- Android EditText控件即设置最小高度又运行高度随内容增加而变化
(转)http://www.aichengxu.com/view/1405748 记录学习用 如题,有时候EditText需要一个最小的高度,但是在输入更多内容时,要随着内容的增加而变化高度,一般 ...
- Django- 分页
1. 防止 翻页直接输入值错误导致翻页出现问题 应该捕获输入的值,如果有异常 跳转会第一页 try: page = int(传递过来的值) if(page <0): page=1 except ...
- Entity Framework Code First (七)空间数据类型 Spatial Data Types
声明:本文针对 EF5+, Visual Studio 2012+ 空间数据类型(Spatial Data Types)是在 EF5 中引入的,空间数据类型表现有两种: Geography (地理学上 ...
- Doccms 中新闻列表排序无效bug的修复
手动修改 content/index/list.php 37 为 $sql="Select * FROM ".TB_PREFIX."list Where channelI ...
- unittest测试驱动之HTMLTestRunner.py
对于自动化来说,测试报告是必须的,在敏捷化的团队中,团队中的成员需要自动化这边提供自动化的测试报告,来判断系统的整体质量以及下一步的测试策略.单元测试库生成测试输出到控制台的窗口上,但是这样的结果看起 ...