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 ...
随机推荐
- 【BZOJ3166】ALO（主席树）
[BZOJ3166]ALO(主席树) 题面 权限题qwq 资磁洛谷 题解 用一个\(set\)求出左右侧比这个数大的第\(2\)个数, 然后用可持久化\(Trie\)算一下就好啦 #include&l ...
- 【51Nod1386】双马尾机器人Description 解题报告
[51Nod1386]双马尾机器人Description 给定\(n\)和\(k\),我们要在\(1,2,3,...,n\)中选择若干的数,每一种选择的方案被称为选数方案. 我们定义一种选数方 ...
- 洛谷 P4503 [CTSC2014]企鹅QQ 解题报告
P4503 [CTSC2014]企鹅QQ 题目背景 PenguinQQ是中国最大.最具影响力的SNS(Social Networking Services)网站,以实名制为基础,为用户提供日志.群.即 ...
- Zabbix Agent for Linux部署（四）
一.环境介绍 二.代理安装 1.将代理程序拷贝至Node1服务器的/usr/src/zabbix3.4.5/目录下 [root@Node3 zabbix3.-.el7.x86_64.rpm zabbi ...
- HDU.1495 非常可乐 （BFS）
题意分析 大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享这一瓶可乐,而且一定要喝的和seeyou一样多 ...
- [POJ1094] Sorting It All Out
link 题目大意 给出$m$个不等式关系,问可以从第几个开始确定所有之间的大小关系.若无解请输出是无法确定还是与已知矛盾. 试题分析 这题是真的是坑啊,尽然放在$floyd$传到闭包上面,还用二分, ...
- 框架----Django内置Admin
Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django.contrib.contenttyp ...
- selenium - webdriver - cookie操作
WebDriver提供了操作Cookie的相关方法,可以读取.添加和删除cookie信息. WebDriver操作cookie的方法: get_cookies(): 获得所有cookie信息. get ...
- jsp 的 4 种基本语法
1.JSP 注释 2.JSP 声明 3.JSP 表达式 4.JSP 脚本 JSP 注释: 注释格式: <%-- 注释内容 --%> 需要注意的是,JSP 的注释不会输出到 HTML 中. ...
- HDU 6038
Function Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...
