html、css提高

11.4 html、css提高

  • html 路径‘列表’表格‘表单
  • css id选择器‘盒子模型 显示’隐藏‘浮动

1.html路径

就和linux一样,90%一样
相对路径:同级,上级,下级,和linux一样
前端开发中,绝对路径不允许使用,都用相对路径
可以用互联网绝对地址:src=“http://www.baidu.com/img/bd_logo1.png

2. html列表

无序列表,有序列表,项目列表(自定义列表)
列表是整体管理的大标签,嵌套表示某一项的小标签

无序ul嵌套ui,ul是无序,li是某一项

ul>li 大于号表示包含标签生成列表,清除项目符号 css:list-style = none;

有序列表ol嵌套 li

项目列表,dl嵌套dt和dd

dl是整体标签,dt是项目标题,dd是项目的描述信息
dl>dt+dd

ulli做导航

快捷键ul>(li>a{我是a $})*5 +tab键
ul>li>(span+a) 快速构局,管理关系

3.表格

表格布局已经改成div布局
div读取一行显示一行

表格:table嵌套tr(行),tr嵌套tb(单元格)

table>tr>td
table1的border属性可以加描边,他的css属性
border属性可以控制边的粗细,颜色,线条种类,border是一个key对应多个v,多个值之间用空格隔开,而且不分先后
solid实线
border-collapse 合并表格边框线

扩展

cellspacing = 50拉开单元格之间的距离
cellpadding = 20 拉开内容与td边缘之间距离
注意加了border-collapse这些效果不生效

合并单元格:在要合并的td上加clospan=‘num’
竖向合并
rowspan

table里还有th表头这个标签,caption表格标题的标签

4.表单

<form action="http://www..." method="get">
<p>
<label>姓名:</label><input type="text" name="username" />
</p>
<p>
<label>密码:</label><input type="password" name="password" />
</p>
<p>
<label>性别:</label>
<input type="radio" name="gender" value="0" /><input type="radio" name="gender" value="1" /></p>
<p>
<label>爱好:</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片:</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述:</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯:</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>
单行文本框文字提示

placeholder 设置input输入框的默认提示文字。

表单就涉及数据的交互。
登录,注册和搜索功能要用表单

form标签:表单域标签,只是一个整体的区域

action属性,提交地址,method,提交方法,post加密方式

form只是整体的区域,具体功能表单控件实现

input:框 它不换行 提交按照键值对,value表示框值,name表示key,框名
type属性:text,文本框 默认文字html属性placeholder或者用value再用js控制
框的属性也是通过value这个属性收集数据 type属性:passowrd, 密码框
单选框type属性radio:name属性表示单选款名字,要实现单选就要单选框名字一样,默认勾选用checked="checked"或者直接checked。让点文字就能实现点选,扩大触发区域,单选框加id,用label包裹起来文字,<label for “id_n”>文字
file属性:上传文件
submit属性,提交,提交到form声明的地址,value属性可以更改显示文字
button属性,普通按钮,同样value更改显示文字,用js绑定功能 button标签和这个功能完全一样
reset属性:重置。
checkbox属性:多选框,多选,默认选中checked

textarea控件标签:文本域,加个css静用拖拽。
resixe:none
outline:none,消除文本框选中提示

select表单控件标签实现下拉框,
select里嵌套option实现选项 做默认选中option里加selected

5.css选择器

id选择器:用#这个符号 注意,一个id选择器一个页面只能使用一次,是唯一标志符

<style>
#aa{
}
</style>
<h2 id="aa"></h2>

并集选择器:
用,隔开列上多个选择器

<style>
div, span, p, #sa, .aa{
	xxx:xxx
}
</style>

层级选择器:
有空格就是层级选择器

<style>

ul li{
}
父层 空格 子层{}
</style>

伪类选择器:
就是状态,当。。。时,例如鼠标悬停
例如超链接可以未点击,点击后,悬停,划过,伪类就是这四个状态

选择器 冒号 link(未点击) visited(点击后)hover(划过) active(点击时,按住不松开)
a:link{}
a:visited{}
a:hover{}
a:active{}

实际只写
a{} 初始的状态
a:hover{} 只做悬停提示

标签选择器:选中一类标签
. :设置一类
# :层级较深
, :不同的选择器在一起设置相同样式
‘ ’ :有桥套关系在用
: :hover悬浮状态

6.css盒子模型

盒子模型是抽象的比喻,抽象盒子来看网页
盒子就是标签,用于装东西
width盒子宽度,heigth盒子高度,border盒子边框
padding盒子填充,拉开内容和盒子边缘距离

蓝色模型尺寸计算 border+padding+原来尺寸content

css3有一个属性,box-sizing:border-box固定盒子尺寸,启动盒子内减模式,以conten的大小固定盒子

拉开盒子与盒子的距离:margin,叫外边距,出现在盒子外面

content - padding - border - margin

盒子模型的一些属性:

border - padding - margin三个

html快捷键div.aa +tab键div标签类名aa

<div class="aa"></div>

四个方向,left,right,top,bottom可以加描述

padding:10px 20px 30px 40px;分别表示上右下左顺时针;有三个数就是上,左右一样,下;有两个值是上下一样,左右一样;
margin和padding的设置方法完全一样;

浮动 同级元素

只用设置一个浮动

CSS float 属性定义元素在哪个方向浮动,浮动元素会生成一个块级框,直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值