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 ...
随机推荐
- Halum UVA - 11478（差分约束 + 二分最小值最大化）
题意: 给定一个有向图,每条边都有一个权值,每次你可以选择一个结点v和一个整数d,把所有以v为终点的边的权值减小d,把所有以v为起点的边的权值增加d,最后要让所有边权的最小值非负且尽量大 两个特判 1 ...
- Unity3D for VR 学习(10): Unity LOD Group 组件
LOD (Level of Detail), 远小近大思想. LOD,在Unity中是用到了空间换时间的优化方法:即程序加载2套模型,导致包会增大:在运行时刻,远处的用面数少的模型–模糊一些,近处用面 ...
- selenium - webdriver - 截图方法get_screenshot_as_file()
WebDriver提供了截图函数get_screenshot_as_file()来截取当前窗口. from selenium import webdriver from time import sle ...
- Codeforces Round #427 (Div. 2) D dp
D. Palindromic characteristics time limit per test 3 seconds memory limit per test 256 megabytes inp ...
- Linux系统之路——如何在CentOS7.2安装R和RStudio(Server)
使用ubuntu的小伙伴们直接使用命令sudo apt-get install r-base-dev或者r-base搞定.然而对于使用centos的我却一直卡在安装这一步,十分的悲催,只有羡慕的份,但 ...
- Drivers Dissatisfaction 最小生成树+LCA
题意:给一张n个点m条边的连通图,每条边(ai,bi)有一个权值wi和费用ci, 表示这条边每降低1的权值需要ci的花费.现在一共有S费用可以用来降低某些边的权值 (可以降到负数),求图中的一棵权值和 ...
- 装饰器--decorator1
装饰器 一.定义 1.装饰器:本质是函数 2.功能:用来装饰其他函数,为其他函数添加附加功能 二.原则 1.不能修改被装饰函数的源代码 2.不能修改被装饰函数的调用方式 三.实现装饰器 1.函数 即 ...
- API图片路径和超链接语义化转换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- Excel公式
多个IF =IF(ISNUMBER(SEARCH("lz",E7)),"lz", IF(ISNUMBER(SEARCH("zch",E7)) ...
- GridControl详解（七）事件
private void gridView1_RowCellClick(object sender, DevExpress.XtraGrid.Views.Grid.RowCellClickEventA ...
