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 ...
随机推荐
- [CF1103B]Game with modulo
题目大意:交互题,有一个数$a(a\leqslant10^9)$,需要猜出它的值,一次询问为你两个数字$x,y(x,y\in[0,2\times10^9])$: 若$x\bmod a\geqslant ...
- Spring Boot系列教程十：Spring boot集成Sentinel Redis
前言 上一篇文章介绍了spring boot集成单点的redis,然而实际生产环境使用单点的redis风险很高,一旦宕机整个服务将无法使用,这篇文章介绍如何使用基于sentinel的redis高可用方 ...
- 【HDU5730】Shell Necklace（多项式运算，分治FFT）
[HDU5730]Shell Necklace(多项式运算,分治FFT) 题面 Vjudge 翻译: 有一个长度为\(n\)的序列 已知给连续的长度为\(i\)的序列装饰的方案数为\(a[i]\) 求 ...
- S-T平面图
给定一个平面图和一个源点S.汇点T都在图中无边界的区域上,这样的图叫S-T平面图 我们把图中每一个独立的面看做一个点,对于每条边e,将它两侧的面连一条边,其中靠近S的一段与S相连,与T相连的一段与T相 ...
- HDU.1166 敌兵布阵 (线段树 单点更新 区间查询)
HDU.1166 敌兵布阵 (线段树 单点更新 区间查询) 题意分析 加深理解,重写一遍 代码总览 #include <bits/stdc++.h> #define nmax 100000 ...
- PHP 中的新语法 new static 是个啥意思？
简单通俗的来说, self就是写在哪个类里面, 实际调用的就是这个类.所谓的后期静态绑定, static代表使用的这个类, 就是你在父类里写的static, 然后通过子类直接/间接用到了这个stati ...
- Hbase(五) hbase内部原理
一.系统架构 客户端连接hbase依赖于zookeeper,hbase存储依赖于hadoop client: 1.包含访问 hbase 的接口, client 维护着一些 cache(缓存) 来加快对 ...
- 2017 Multi-University Training Contest - 2
HDU 6045 #pragma comment(linker, "/STACK:102400000,102400000") #include <cstdio> #in ...
- 手脱EZIP v1.0
一.单步 1.载入PEID查壳 EZIP v1.0 2.载入OD,一上来就是一个大跳转,F8单步一直走 0040D0BE > $ /E9 jmp Notepad.004102DC ; //入口点 ...
- Restful 接口传递参数
首先补充一下什么是 Restful ,这里简单说一下,如果一个架构符合REST原则,就称它为RESTful架构. RESTful架构特点: (1)每一个URI代表一种资源: (2)客户端和服务器之间, ...
