43 HTML CSS
第一部分:
1.meta 标签中:
meta 标签中 <meta http-equvi = "refresh" content="2;URL= https://www.baidu.com "> 页面两秒钟跳转到目标页面 2. a链接
href="#id 名" 猫点 跳转本页 id 名的位置
target =_blank 到新页面打开 3.img
alt 图片加载失败后显示
src 图片路径
title 鼠标悬浮显示的内容 4.form 表单
属性 action ="网址:端口" method = get 或post
input 标签中的属性
type = "text"
passord
单选input 需要设置name属性,name的值做为key ,用户输入的作为value
多选input 需要设置value name 值做key ,value值做value
label 标签 不独立一行,可以夹多个input 或单个input
select 下拉框 需要写name 和value 属性
option
textarea 多行文本
name
rows 行数
cols 列数 5. table 标签中的格式,属性border 设置边框格式,
cellspacing 外边距 内外边框的距离
cellpadding 内边距 内边框距内容的距离
thead - tr - th
tbody - tr -td td中属性 rowspan 跨行,效果表现为竖合并效果 colspan 跨列,效果表现为横合并 第二部分:
一.选择器
后代选择器 div p 子子孙孙
儿子选择器 div>p div里面一层p
毗邻选择器 div+p div同级下面第一个p
弟弟选择器 div~p div 同级下面所有p
伪类选择器
a:link{} 未访问的连接
a:visited{} 已经访问的链接
a:hover{} 鼠标移动到链接上时
a:active{} 鼠标点下去还没抬起来的那一瞬间
伪元素选择器:
frist-letter
p:first-letter{font-size:20px,color:red} 给首字母设置特殊样式
before
p:before {content:"p元素前面的内容,此处要有此属性"}
after和before 类似 都必须要有content内容
选择器的优先级:!important >内联样式>id选择器>类选择器>元素选择器
二. CCS样式
1.font-family :"Microsoft Yahei" ,'Arial' 回退机制,浏览器第一种格式没有识别的话就会去识别第二种格式
2.font-wheigt: inherit 继承父元素字体粗细值
3.text-align 元素中文本的水平对齐方式
4.text-decoration 给文字添加特殊样式
none underline overline line-through inherit
5.首行缩进 text-indent : 32px; 默认一个字在页面大小为16px
6.background:
no-repeat 不平铺
repeat-x,y 水平和垂直方向平铺
background-position :center center ;雪碧图的设置
background :red url("path") no-repeat top right
background-attachment:fixed 固定背景图
边框: border
broder : none dotted 点状虚线 dashed 矩形虚线 solid 实线边框
border-radius 圆角边框效果
display:
none 元素不显示,且不占位置
black 行内元素可以变块元素
inline 块元素可以变行内元素
inline-black 行内和块元素特点
visibility:hidden 隐藏且占位置
盒子模型:
padding 内边距 内容距边框的大小
margin 外边距 盒子之间的间距
padding+margin+border+content 为盒子大小 ,设置padding大小时和撑大盒子,content不会不变
参考资料:https://www.cnblogs.com/clschao/articles/10082587.html
43 HTML CSS的更多相关文章
- 43.纯 CSS 绘制一个充满动感的 Vue logo
原文地址:https://segmentfault.com/a/1190000015177284 感想: 又有点回到boder的三角形 HTML code: <div class="v ...
- 43、css实现镂空半圆环
<style> .circle { position: relative; box-sizing: border-box; } .big { width: 140px; height: 1 ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
- 面试题HTML +CSS
HTML+CSS部分1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他 ...
- 用CSS实现一个抽奖转盘
效果 基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 首先画一个转盘, <!DOCTYPE html> <html lang="en"> ...
- 前端面试题整理—HTML/CSS篇
1.简述一下你对HTML语义化的理解 1)用正确的标签做正确的事情 2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析 3)即使在没有样式CSS情况下也以一种文档格式显示,并 ...
- 一个经验丰富的网站建设程序员的CSS资料
没有就不能活的 53 个 CSS 技术 对新手实用的 20 个 CSS 建议 快速编写更好 CSS 代码的 5 种方法 50+ 个 CSS 创意案例和教程 101 个 CSS 小贴士.教程和范例 CS ...
- 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!
大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧
- Asp.net MVC 实现图片上传剪切
使用技术:Asp.net MVC与jquery.uploadify,Jcrop 首先上页面 01 <strong><!DOCTYPE html> 02 <html> ...
随机推荐
- linux常用命令:less 命令
less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...
- python退出多重循环
假设一段python程序有多重循环,我们都知道在一个循环当中,用break是退出当前的循环,然后继续下一次循环,但是如何才能跳出多重循环呢,实际就是结束所有的循环. 思路1::可以定义一个异常类,在需 ...
- 20145316《网络对抗》Exp9 Web安全基础实践学习总结
20145316<网络对抗>Exp9 Web安全基础实践学习总结 基础问题回答 SQL注入攻击原理,如何防御 SQL注入,就是攻击者通过把SQL命令插入到Web表单递交或输入域名或页面请求 ...
- java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例
java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...
- 在thinkphp里面执行原生的sql语句
在thinkphp里面执行原生的sql语句 怎样在thinkphp里面执行原生的sql语句? $Model = new Model();//或者 $Model = D(); 或者 $Model = M ...
- 简单的Django实现图片上传,并存储进MySQL数据库 案例——小白
目标:通过网页上传一张图片到Django后台,后台接收并存储进数据库 真是不容易!!这个案例的代码网上太乱,不适合我,自己摸索着写,终于成功了,记录一下,仅供自己参考,有的解释可能不对,自己明白就好, ...
- Android 基础知识点(一)
- 20145127《java程序设计》第四周学习总结
教材学习内容总结 第六章 继承与多态 6.1 何为继承 0.面向对象中,子类继承父类,避免城府的行为定义.正确判断使用继承的时机,以及继承之后如何活用多态,才是学习继承时的重点. 1.继承:避免多个类 ...
- CAN通信(STM32)
1.CAN是控制器局域网络(Controller Area Network, CAN)的简称 (理论知识不做讲解了,太多了) 2.芯片选用:TJA1050 差分信号输入, 这里的显性电平CANH和CA ...
- static理解
static 修饰的变量称为类变量或全局变量或成员变量,在类被加载的时候成员变量即被初始化,与类关联,只要类存在,static变量就存在. 一个static变量单独划分一块存储空间,不与具体的对象绑定 ...