HTML基础--css基本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 指定编码 -->
<title>liudaozhang</title>
<link rel="shortcut icon" href="http://www.nnzhp.cn:80/wp-content/themes/QQ/images/logo.jpg">
<style>
/*.c1{*/
/*height: 100px;*/
/*width: 100px;*/
/*border: red 2px solid;*/
/*text-align: center;*/
/*line-height: 100px;*/
/*}*/
/*text-align: center; 水平方向居中*/
/*line-height: 100px; chS方向居中*/
/*.c1{*/
/*height: 100px;*/
/*width: 100px;*/
/*border: red 2px solid;*/
/*float: right; ;*/
/*}*/
/*float:通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，*/
/*超过100%的宽度，是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承*/
</style>
</head>
<body>
<!--<div style="height: 100px;width: 100px;kkk</div>-->
<!--<div style="height: 100px;width: 100px;font-size: 100px">kkk</div> 字体大小-->
<!--<div style="height: 100px;width: 100px;font-weight: bold">kkk</div> 字体粗细-->
<!--<div style="height: 100px;width: 100px;border: red 2px solid;text-align: center">kkk</div> 水平方向居中-->
<!--<div style="height: 100px;width: 100px;border: red 2px solid;text-align: center;line-height: 100px">kkk</div> 水平方向居中-->
<!--<div class="c1">kkk</div>-->
<!--<div class="c1">kkk</div>-->
<!--<div class="c1">kkk</div>-->
<!--display 属性行内块级标签的转换 重要 重要 重要-->
<!--<span style="height: 100px;width: 100px;border: red 2px solid;display: block"></span>-->
<!--display:block 行内标签转换为块级标签 行内标签无法设置无法设置高度、宽度、padding、margin，-->
<!--<span style="height: 100px;width: 100px;border: red 2px solid;display: none"></span>-->
<!--display:none 隐藏属性-->
<!--<div style="display: inline">qqq</div>-->
<!--display:inline，块级标签转换为行内标签-->
<!--<span style="height: 100px;width: 100px;border: 2px red solid;display: inline-block"></span>-->
<!--display:inline-block，行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性-->
<!--<div style="height: 100px;width: 100% ;border: 2px blue solid;">-->
<!--<div style="height: 70px;width: 60% ;margin-left:1px "></div>-->
<!--<div style="height: 70px;width: 60% ;padding-left:1px "></div>-->
<!--</div>-->
<!--margin 外边距-->
<!--自己针对外围的div产生变化 外边距撑大外层 top left right bottom-->
<!--padding 内边距-->
<!--内边距 自身的边距增加 top：从上到下增加 内边距扩大自身 bottom：从下增加 left：从左增加 right：从右增加-->
</body>
</html>
==============================分割线===========================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 指定编码 -->
<title>liudaozhang</title>
<link rel="shortcut icon" href="http://www.nnzhp.cn:80/wp-content/themes/QQ/images/logo.jpg">
<style>
/*.c1{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/
/*.c1:hover{*/
/**/
/*}*/
/*hover属性是当鼠标移动到上面后，设置其样式*/
.c2{
height: 50px;
width: 50px;
border: 1px solid;
background-image: url("http://ui.imdsx.cn/static/image/icon.png");
background-position-x: 10px;
background-position-y: 10px;
}
/*将 div看做一个窗户 图片在窗户外移动 用于切图*/
/*background-position-x: 10px;*/
/*background-position-y: 10px;*/
</style>
</head>
<body style="margin: 0">
<!--position-->
<!--<div style="height: 48px;width: 100%;position: fixed">1234</div> 写法1 -->
<!--<div style="height: 48px;position: fixed;top: 0;left:0;right: 0"></div> 写法2-->
<!--<div style="height: 1000px;margin-top: 48px">222</div>-->
<!--position 分层-->
<!--position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right -->
<!--position relative absolute-->
<!--position：relative 与 position：absolute(绝对定位，单用没什么作用 结合relative才牛逼) -->
<!--absolute的定位针对于于relative的定位 单独relative没有任何意义 见body.html-->
<!--<div style="height: 400px;width: 400px;border:red 2px solid;position: relative">-->
<!--<div style="height: 50px;width: 50px;position: absolute;right: 0;bottom: 0"></div>-->
<!--<div style="height: 50px;width: 50px;position: absolute;left: 0;top: 0"></div>-->
<!--<div style="height: 50px;width: 50px;position: absolute;right: 0;top: 0"></div>-->
<!--<div style="height: 50px;width: 50px;position: absolute;left: 0;bottom: 0"></div>-->
<!--</div>-->
<!--position 的absolute 和relative属性 使用这样便于调整布局top left bottom right 按上下键能调整 -->
<!--relative和absolute必须要连用，relative在外层 absolute在内层-->
<!--<div style="height: 100px;width: 100px;position: absolute;top: 100px;left: 100px"></div>-->
<!--<div style="height: 1000px;margin-top: 48px;">2222</div>-->
<!--<div style="height: 100px;width: 100px;position: relative">-->
<!--<div style="height: 100px;width: 100px;z-index: 2 ;position: absolute "></div>-->
<!--<div style="height: 100px;width: 100px;z-index: 2 ;position: absolute "></div>-->
<!--z-index: 2 谁的值大 谁就是在上一层/外层 就显示谁的颜色-->
<!--<input type="button" value="login" style="cursor:pointer"> 这是鼠标变成小手-->
<!--<input type="button" value="login" style="cursor:move"> 鼠标变成十字架-->
<!--<input type="button" value="login" style="cursor:crosshair"> 鼠标变成截图-->
<!-- auto 自动增加滚动条-->
<!--<div style="height: 200px;width: 200px;border: red 1px ;overflow: auto">-->
<!--hidden 自动截取超出部分的滚动条-->
<!--<div style="height: 200px;width: 200px;border: red 1px ;overflow: hidden">-->
<!--scroll 要求出现滚动条-->
<!--<div style="height: 400px;width: 400px;border: red 1px ;overflow: scroll">-->
<!--<img src="http://www.imdsx.cn:80/wp-content/themes/QQ/images/logo.jpg">-->
<!--overflow属性设置当div内的内容溢出div的高宽时，如何处理 默认会出现在元素框之外-->
<!--hidden：溢出部分截取掉 scroll：超出就出现滚动条-->
<!--<div class="c1"></div> /*hover属性是当鼠标移动到上面后，设置其样式*/-->
<!--<div style="height: 1000px;width: 100%;background-image: url('logo.jpg');background-repeat: repeat-x"></div>-->
<!--<div style="height: 1000px;width: 100%;background-image: url('logo.jpg');background-repeat: repeat-y"></div>-->
<!--<div style="height: 1000px;width: 100%;background-image: url('logo.jpg');background-repeat: no-repeat"></div>-->
<!--background 是针对背景一些样式设置， background-image：背景图片，-->
<!--图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。-->
<!--可通过background-repeat属性对是否堆叠进行设置-->
<!--no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)。-->
<!--background-position 针对div设置图片展示的位置。-->
<!--background-position-y: 10px 纵向移动图片-->
<!--background-position-x: 10px 横向移动图片。-->
<!--也可以不写x或y，默认第一个为x的值 第二个位y的值，-->
<!--background-position:10px 10px。-->
<!--可以通过background直接简写，-->
<!--background 简写 参数分别为 颜色 背景图 postion横向 纵向 是否堆叠-->
<!--<img src="http://www.imdsx.cn:80/wp-content/themes/QQ/images/logo.jpg">-->
<!--<div style="height: 10px;width: 10px;border: 1px red solid;background-image: url('http://www.imdsx.cn:80/wp-content/themes/QQ/images/logo.jpg')"-->
<!--<div class="c2"></div> 切图-->
</body>
</html>
<!--hw：-->
<!--顶层 用-->
<!--<div align=""-->
<!--导航用position-->
<!--文案覆盖的话用margim-top：48px-->
<!--贴边：margim：0-->
- 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
- 前端零基础 --css转换--skew斜切变形 transfor 3d
前端零基础 --css转换--skew斜切变形 transfor 3d==============重要不紧急! 重要紧急 重要不紧急 不重要紧急 不重要不紧急
- 前端基础——css
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
- 前端基础-CSS属性操作
前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...
- HTML&CSS基础-CSS的语法
HTML&CSS基础-CSS的语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.dome.html源代码 <!DOCTYPE html> <html ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- Python 15 html 基础 - CSS &javascript &DOM
本节内容 CSS基础 javascript基础 DOM 前言,这边这块楼主已经很熟悉了,CSS天天用到,简单的一些javascript也是所以就挑点重点说了.然后就是dom不怎么用,但是其实也用不到, ...
- Web前端基础——CSS
一.CSS概述 css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示.位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,cs ...
随机推荐
- 转载--------Python中：self和__init__的含义 + 为何要有self和__init__
背景 回复:我写的一些Python教程,需要的可以看看,中SongShouJiong的提问: Python中的self,__init__的含义是啥?为何要有self,__init这些东西? 解释之前, ...
- 【CF600E】Lomsat gelral（dsu on tree）
[CF600E]Lomsat gelral(dsu on tree) 题面 洛谷 CF题面自己去找找吧. 题解 \(dsu\ on\ tree\)板子题 其实就是做子树询问的一个较快的方法. 对于子树 ...
- BZOJ 1070 修车 【费用流】
Description 同一时刻有N位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同 的车进行维修所用的时间是不同的.现在需要安排这M位技术人员所维修的车及顺序, ...
- 【51nod1965】奇怪的式子
Portal --> 51nod1965 Solution 怎么说呢..这题..做的有点痛苦.. 首先看这个式子长得..比较奇怪,指数里面那个加号有点烦人,而且这个函数不是一个积性函数也有点烦人 ...
- shell unittest工具
shUnit2: https://github.com/kward/shunit2 用法非常简单,看看readme就行了.
- python---websocket的使用
一:简介 推文:WebSocket 是什么原理?为什么可以实现持久连接? 推文:WebSocket:5分钟从入门到精通(很好) WebSocket协议是基于TCP的一种新的协议.WebSocket最初 ...
- Spring 多数据源 @Transactional 注解事务管理
在 Spring,MyBatis 下两个数据源,通过 @Transactional 注解 配置简单的事务管理 spring-mybatis.xml <!--******************* ...
- JS中client/offset/scroll等的宽高解析
原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...
- javascript在IE下不能用 trim函数解决方法
javascript 的trim 函数在firefox 下面使用没有问题 <script language="javascript"> var test1 = &quo ...
- 说说asp.net中的异常处理和日志追踪
关于异常的处理想必大家都了解try{}catch(){}finally{},这里就不再讲了.通过在VS里的"调试"-"异常",在弹出的异常对话框里的Common ...
