html+css基础
完整的HTML结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>
样式的引用
一。内部编写
<head>
<title> </title>
<style type="text/css">
body {background:black; text-spacing:0.5em}
.div_css1 {align="center" margin:20px}
.p_css1 {color:red; font:(Style)itlic||oblique (variant)small-caps||none (weight)800(400=norml 700=bold) (size)4em (family)“宋体”||Times New Norman}
</style>
<div class="">
(if ues: so use the style just 1 times)!!!
#div_css {}
<div id="">
(or ues: so don't write"class or id =?" )
div.p {}
div p {}
二。外部引用
<link rel="stylesheet" type="text/css" href="xx.css">
超链接的样式
a {} // all super links
a:link {} //no linked links
a:visited{} //alredy linked links
a:hover{} //on mose move to the link
a:action{} // 点击时
插入flash文件
<object type="application/x-shockwave-flash" date="///" width="" height="" id="">
<param name="movie" value="///"/>
<param name="allowscriptAcess" value="sameDomain"/>
<param name="quality" value="best"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="scale" value="noScale"/>
<param name="salign" calue="TL"/>
<param name="FlashVars" value="playerMode=embedded"/>
</object>
插入视频
<object type="video/x-ms-wmv" date="////xx" width="" height="">
<param name="src" value="////xx"/>
<param name="autostart" value="true"/>
<param name="controller" value="true"/>
</object>
插入网页块
<iframe
src="xx"
width=""
height=""
scrolling="auto"
frameborder="o"
name="xx">
</iframe>
插入表单
<form action="#" name="" id="" method="post"> </form>
一。文本输入(账号,密码)
账号<input type="text" name="" id="" maxlenth=""/>
密码<input type="password" name="" id="" maxlenth=""/>
二。提交表单
<input type="submit" name="" id="" value="确认"></input>
三。单选
<input type="radio" name="" id="" value="xx">xx</input>
<input type="radio" name="" id="" value="xx">xx</input>
四。多选
<input type="checkbox" name="" id="" vslue="xx">xx</input>
<input type="checkbox" name="" id="" vslue="xx">xx</input>
<input type="checkbox" name="" id="" vslue="xx">xx</input>
五。下拉菜单
<select name="" id="">
<option vslue="xx">xx</option>
<option vslue="xx">xx</option>
<option vslue="xx">xx</option>
</select>
六。列表(没有下拉)
<select name="" id="" size="个数">
<option value="">xx</optin>
.......
......
</select>
悬浮文字框
<fieldset>
<legend>xx</legend>
</fieldset>
滚动文字
<maquee direction="up || left" scrollamount="0-x" onmouseover="stop()" onmouseout="start()">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</marquee>
表格
<table>
<tr>
<td>xx</td>
</tr>
<tr>
<td colspan="num">xx</td> //合并横向
<td rowspan="num">xx</td> //合并竖向
</tr>
</table>
文字的一些属性
设置元素内容的文本属性
(1)举例设置文本首行缩进
text-indent:2em;
(2)举例设置文本对齐方式
text-align:left | right | center;
(3)举例设置文本修饰方式
text-decoration:underline;
(4)举例设置字间距
letter-spacing:2em;
(5)举例设置词间距
word-spacing:0.5em;
(6)举例空白显示形式 P56
white-space:pre;
外边距margin:围绕在元素边框之外的可选区域。
内边距padding:文本内容到边框之间的可选区域
元素浮动
浮动:
float
有2个方向: left right none(不浮动)
对于文字浮动,必须设置高度,宽度,如果不设,后后果自负。
例
<img style="float:right" src="..."/>
清除浮动:
clear:none; //允许元素的两边都可以有浮动
clear:left; //不允许左边有浮动元素
clear:right; //不允许右边有浮动元素
clear:both; //两边都不允许有浮动元素
定位类型position
分类:
static(静止)此为默认,即按照正常的文本流,占用正常的位置。
fixed(固定的) 相对于浏览器窗口定位(保留原位置)
position:absolute;
绝对定位:相对于父级元素(被包含容器)。
position:relative;
相对定位:相对于没有设置position时的正常位置定位
原始空间会保留下来。(意思就是说按static的位置算的地方不会出现另外的标签。如DIV,IMG等等。)
例子:
<head>
<style type="text/css">
.div_1 {width:150px;height:200px;}
.text1 {width:200px;height:100px;left:160px;}
</style>
</head>
<body>
<div>
<div class="div_1" style="position:absolute;">
哈,我是一个帅哥
</div>
<div class="text1" style="position:absolute;">
是不是哦,我晕你
</div>
<div style="position:relative;left:10px;top:15px;">
我看看行不行。</div>
</div>
</body>
运行结果为:哈我是一个帅哥 是不是哦,我晕你
我看看行不行。
解释:“哈我是一个帅哥”用的是absolute 绝对定位,它相对于第一个DIV来定位,因为第一个DIV是它的父级元素,将它包含在里面。所以它出现在顶部起头。(因为没对其设置left 和top等)
“是不是哦,我晕你”也是absolute 绝对定位,它相对于第一个DIV定位,设置了left值为160px,大于上一个div的宽度,所以不会重合。
“我看看行不行”用的是relative 相对定位,它相对与父级元素定位,也就是第一个DIV,它定位的位置从父级元素里面的最开始位置算起,所以,如果不设置top的话就会和第二个div重合。而字体的大小一般为15px‘
指定裁剪区域
position:absolute;
clip:rect(top right bottom left);
top:从上到下裁去top的长度。
left:从左到右裁去left的长度。
right:从左到右裁出right的长度。
bottom:从上到下裁出bottom的长度
将块级元素转化为字符级元素
display:inline;
将字符级元素转化为块级元素
display:block;
处理溢出
position:absolute;(必须为absolute)
overflow:visible; //溢出区域可见
overflow:hidden; //溢出区域不可见
overflow:scroll; //溢出区域出现滚动条
盒模型
有 margin padding border width height
简写时安上右下左顺序来写
如:border-width:1em 2em 2em 2em
注意:上下左右这几个属性:
在设置时如果只出现3个值,则代表上 左右 下
2个值: 上下 左右
1个值:全部 =出现4个一样的值
插入多媒体
<embed src="1.swf" width=300 height=200></embed>
<embed src="1.mp3" width=300 height=200></embed>
<embed src="1.wmv" width=300 height=200></embed>
转载
html+css基础的更多相关文章
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础总结
CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- css基础不扎实
写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...
- css基础总结一
最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...
- CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
随机推荐
- JAVA模板方法模式
模板方法模式的结构 模板方法模式是所有模式中最为常见的几个模式之一,是基于继承的代码复用的基本技术. 模板方法模式需要开发抽象类和具体子类的设计师之间的协作.一个设计师负责给出一个算法的轮廓和骨架,另 ...
- js数组和对象互转方法
<script> let arr = [2, 3, 4, 2, 3, 4]; // 数组转化为对象 function toObject(arr) { let obj = { } for(l ...
- Fedora、CentOS install TTF/otf fonts
Step 1:切换至字体下载目录: [Richard@localhost Downloads]$ ll | grep otf -rw-rw-r--. Richard Richard 7月 RBNo2L ...
- ORACLE EBS R12 FOR LINUX 开机后如何启动数据库、应用脚本[Z]
在Linux中安裝EBS R12後, EBS關閉與啟動的程序為: 1. 關閉EBS - 先關閉Applications Server $ cd /d01/oracle/VIS/inst/apps/V ...
- 场景:A-->B-->C 跳转到C时,要关掉B的处理方法
场景:A-->B-->C 跳转到C时,要关掉B的处理方法:相当于从A跳转到C UIViewController *preController = [self.navigationContr ...
- OC中最难的一部分内容:内存管理
OC中最难的一部分内容:内存管理为什么说他难呢?因为内存如果需要我们程序员去管理的话,那个难度肯定是很大的,如果是Java,垃圾回收器会把这份工作给做了,我们不需要关心,但是就是因为如此,Androi ...
- Java 中 静态方法与非静态方法的区别
静态方法和实例方法的区别主要体现在两个方面: 在外部调用静态方法时,可以使用"类名.方法名"的方式,也可以使用"对象名.方法名"的方式.而实例方法只有后面这种方 ...
- node to traverse cannot be null!
严重: Servlet.service() for servlet springmvc threw exception java.lang.IllegalArgumentException: node ...
- light oj 1027 A Dangerous Maze
一道数学期望题,唉唉,概率论学的不好啊~~ 求走出迷宫的期望时间. 由于有的门会回到起点,所以有可能会走很多遍,设能走出去的门的个数为n1,总的个数为n,那么一次走出去的概率为n1/n,走一次的用的平 ...
- OpenGL绘制简单的时钟(首发测试)
#include <windows.h> #include <GL/glut.h>//本来OpenGL程序一般还要包含<GL/gl.h>和<GL/glu.h& ...