330 div+css Experience
今天学习的div，感觉对编辑html更为方便快捷，但还是需要多练，多熟悉一下思路和逻辑方式
越来越感觉，代码不是重要的，重要的是方向和思路，am的float clearfloat 及属性，还有overflow 溢出的三个属性
最重要的是边框左圣诞树 做div的布局算数把我整蒙圈了，用border四个边距设置来做三角形是重点
下午学的盒子 内外边距 边框border margin的重叠取值 和顺序
还有css的初始化
一：div不是功能标签，可以放文字、图片各种元素的块标签，常常用来布局
float浮动：left，right 左右属性
清除浮动：clear：left，right，both左右一起清除
二：溢出
overflow：hidden超出会隐藏 ，scroll 滚动条，auto 超出有滚动，反之。
三：用边框样式做：圣诞树 三角形
border-top：顶
border-left：左
border-right：右
border-bottom：底
PM：
盒子模型：外边距：margin 边框：border 内边距：padding
margin重叠现象：只要有一个元素没有float ，就会出现重叠，这时取相邻最大值
margin的顺序：上有下左（顺时针）
CSS初始化：
*{margin:0px;
padding:0px;}
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>div</title><!-- <div></div>不是功能标签可以放文字、图片及各种元素的块标签 常常用来布局 -->
<style>#d1{background-color:blue;width:200px;height:50px;float: left;}#d2{background-color:red;width:200px;height:50px;/* float浮动属性:left,right. */float: right;}#d3{background-color:green;height: 200px;/* 清除浮动 ：left，right，both左右一起清除*/clear:both;/* 溢出处理 内容超出div会隐藏overflow: hidden; *//* 不管内容是否超出,都会加滚动条 overflow: scroll;内容不超出div没有滚动条,超出自动添加滚动条 */overflow: auto;/* overfl的属性只能有一个存在 */}#header{width: 0px; height: 0px; border-top: 100px solid white; border-right: 100px solid white; border-bottom: 100px solid green; border-left: 100px solid white; float: left;margin-left: 100px; } #main{ width: 0px; height: 0px;border-top: 200px solid white;border-right: 200px solid white;border-bottom: 200px solid green;border-left: 200px solid white; } #footer{width: 100px;height: 300px;background-color: darkolivegreen;margin-left: 150px; }li{list-style-type: none;float:left;margin: 20px;}/* 盒子模型:外边距:margin
语法：margin:20px；像素值; --表示4方向外边距都20pxmargin:20px 40px；像素值1 像素值2;表示margin-top和bottom 20px，margin-left和right40pxmargin:20px 40px 60px 80px;像素值1 像素值2 像素值3 像素值4;表示4个方向 top left bottom right 顺时针方向边框:border内边距:paddingmargin重叠现象：只要有一个元素没有float属性，就会出现重叠现象，这时取相邻最大值*//* CSS初始化:*{margin: 0px; padding: 0px;} */#big{width: 100px;height: 100px;background-color: yellow;}#small1{width: 150px;height: 150px;background-color: red;border: 20px solid #00FFFF;/* margin值的顺序是 上右下左 */margin: 10px 20px 40px;padding: 10px;}#small2{width: 100px;height: 100px;background-color: blue;float:left;margin: 10px;}#small3{width: 100px;height: 100px;background-color: magenta;margin:30px;}#small4 {width: 100px;height: 100px;background-color: pink;clear: both;margin: 20px;}
</style> </head><body><body id="big"><div id="d1">我是左div</div><div id="d2">我是右div</div><div id="d3">我是第三div</div><div id="header"></div><div id="main"></div><div id="footer"></div><div id="small1">戒指</div><div id="small2"></div><div id="small3"></div><div id="small4"></div></div> <ul><li>首页</li><li>新闻</li><li>学校概况</li></ul></body>
</html>View Code
<title>边框样式圣诞树</title><style>#a1{width: 0px;height: 0px;background-color: antiquewhite;border-top: 0px solid #00FFFF;border-right: 100px solid white;border-bottom: 100px solid darkgreen;border-left: 100px solid white;margin-left: 340px;}#a2{width: 0px;height: 0px;background-color: antiquewhite;border-top: 0px solid #00FFFF;border-right: 200px solid white;border-bottom:200px solid darkgreen;border-left: 200px solid white;margin-left: 240px;}#a3{width: 0px;height: 0px;background-color: antiquewhite;border-top: 00px solid #00FFFF;border-right: 300px solid white;border-bottom: 300px solid darkgreen;border-left: 300px solid white;margin-left: 140px;}#a4{width: 80px;height: 530px;background-color: orangered;margin-left: 400px;}</style></head><body><div id="a1"></div><div id="a2"></div><div id="a3"></div><div id="a4"></div></body>用div做方格子
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>方格子</title><style >*{margin:0px;padding:0px;}#aa{width: 750px;background-color: lightgray;}#a1{width: 150px;height:150px;background-color: red;float: left; }#a2{width: 150px;height:150px;background-color: blue;float: left; }#a3{width:150px;height:150px;background-color: blanchedalmond;float: left; }#a4{width:150px;height:150px;background-color: aquamarine;float:left; }#a5{width:150px;height:150px;background-color: palegreen;float:right; }#a6{height:200px;width:480px;background-color: cyan;float: left;}#a7{width: 270px;height:275px;background-color:ivory;float: right; } #a8{height:200px;width:330px;background-color: darkorange;float: left;}#a10{width: 270px;height:275px;background-color: red;float: right; } #a11{width: 480px;height:150px;background-color: green; }#a12{width: 100%;height:150px;background-color: orchid;float: left;}#a9{height:200px;width:150px;background-color: greenyellow;float: left;}</style>
</head><body id="aa"><div id="a1">这是1</div><div id="a2">这是2</div><div id="a3">这是3</div><div id="a4">这是4</div><div id="a5">这是5</div><div id="a6">这是6</div><div id="a7">这是7</div><div id="a8">这是8</div><div id="a9">这是9</div><div id="a10">这是10</div><div id="a11">这是11</div><div id="a12">这是12</div></body>
</html>转载于:https://www.cnblogs.com/zs0322/p/10626486.html
330 div+css Experience相关推荐
- 宠物狗站点html,宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)
宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)(论文11000字,网页代码) 摘 要 本设计将对宠物狗个性化服务网站前端设计开发与实现进行研究和探讨.借助网页设计与制作语 ...
- div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
- DIV+CSS规范命名大全集合
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
- 黑客内参告诉你一个：设计师用div+css 必须知道的网页布局类型
今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打 ...
- 《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]
电驴资源 下面是用户共享的文件列表,安装电驴后,您可以点击这些文件名进行下载 [Div.CSS.3.0网页布局案例精粹].王大远.扫描版.rar详情 53.7MB 全选 53.7MB 下载地址(拷贝到 ...
- html css样式div属性,div css
DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是 ...
- 网页制作中规范使用DIV+CSS命名规则（转）
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则内容如下: 页头:header 如:#header{属性:属性值;}或.h ...
- DIV CSS完美兼容IE6/IE7/FF的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...
- 转载:DIV+CSS有可能遇到的问题
[总结]DIV+CSS有可能遇到的问题 一.超链接访问过后hover样式就不出现的问题? 被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H- ...
最新文章
- 坚持的力量 第十五篇
- 资本|五大科技巨头并购投资布局分析
- 描点链接元素的优化提升用户体验
- 消息发送到消息接收的整体流程
- 使用solr构建hbase二级索引
- Jsp-Servlet 概要总结[转]
- python的socket连接不上_Python套接字只允许一个连接，但在新的连接上断开，而不是拒绝...
- java annotation 实现_在Java中如何实现自己的annotation
- day43,使用朋友pyMySQL连接数据库
- cocos2d-x学习资源汇总（持续更新。。。）
- Java的数据库编程之背景概述
- 【CS231n_2017】2-Image Classification
- 【SeaJS】【1】初识SeaJS
- Dahlia：一个现代化的 React 框架
- docker 容器无法连接外网
- 【转】PLC编程软件: KW multiprog 和 codesys
- nEO iMAGING——400K的图像处理软件(应急处理照片的好帮手)
- Ajax读书笔记（四）
- 虫师乙醇自动化测试培训第三期
- NR 5G 无线帧与子载波