02html和css
/* 1.文字居中 默认left*/
text-align: center;
font-size: 20px;
/* 2.首行缩进 px em */几个字
text-indent: 4em;
/* 3.是否斜体 */
font-style: italic;
/* 4.是否加粗 normal*/默认的
font-weight: bold;
/* 5.font的属性连写:按照顺序写*/
/* 斜体 粗体 字体大小 行高 字体 */
/* font: italic bold 20px/50px "Microsoft Yahei"; */
font: 20px/50px "Microsoft Yahei";没有的可以不写,最好写上normal
/* 6.元素溢出 */
/* //默认 */
/* overflow: visible; */
/* 隐藏超出的内容 没有了 */
/* overflow:hidden; */
/* 滚动查看溢出的内容 */
/* overflow: scroll; */ 滚动条 有的会出横条
overflow:auto; 就不出横条了 好用
选择器
/* 1.ID选择器 id唯一; js的时候使用*/
#three{
color: gold;
}
/* 2.并集选择器,组选择器
strong 语言含义:重要的内容;默认加粗
*/
span,strong{
color: green;
}
/* 3.伪类选择器 */
a{
text-decoration: none;
}
格式:名:属性
/* 鼠标悬浮状态 hover */
a:hover{
color: orange;
}
/* 给当前内容的前面 加东西 */
a:before{
content: "前面的";
}
/* 给当前内容的后面 加东西 */
a:after{
content: "后面的";
}
<!-- 1.有序列表 ol li
ol orderlist
li list
type="A" a i I
-->
<ol type="A">
<li>高级会员</li>
<li>中级会员</li>
<li>初级会员</li>
</ol>
<!-- 2.无序列表 经常使用
ul unorder list
li list
disc circle
-->
<ul type="circle" class="list">
<li>1.高级会员</li>
<li>2.中级会员</li>
<li>3.初级会员</li>
</ul>
/* 取消左侧的小圆点 */
list-style: none
<!-- 定义列表 defination list
dl defination list
dd defination description
dt defination title
-->
<dl>
<dt>高级会员</dt>
<dd>无限量大片免费</dd>
<dd>无限量文章免费</dd>
<dd>滨崎步签名照</dd>
</dl>
<!-- 表单
form :用来提交用户输入的数据
action:提交的网址: 默认就是当前网址
method:提交方式: 默认是get :不安全
post:相对安全
-->
h1>个人信息注册</h1>
<form action="" method="get">
<!-- 1.用户名
lable 标注信息
-->
<p> name表示提交的字段
<lable>用户名:</lable>
<input type="text" placeholder="请输入用户名" name="username">
</p>
<!-- 2.密码 -->
<p>
<lable>密 码:</lable>
<input type="password" name="pwd">
</p>
<!-- 3.性别 -->
<p>
<lable>性 别:</lable>
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
</p>
<!-- 4.爱好 -->
<p>
<lable>爱 好:</lable>
<input type="checkbox" name="like" value="0" >睡觉
<input type="checkbox" name="like" value="1" >学习
<input type="checkbox" name="like" value="2" >看视频
<input type="checkbox" name="like" value="3" >健身
</p>
<!-- 5.玉照 -->
<p>
<lable>玉 玉:</lable>
<input type="file" name="file">
</p>
<!-- 6.下拉列表 -->
<p>
<lable>籍 贯:</lable>
<select name="address" >
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2" selected="selected">广州</option> 默认选
<option value="3">深圳</option>
</select>
</p>
<!-- 7.个人描述 -->
<p>
<lable>个人描述:</lable>
<!-- 文本域 cols="30" rows="40"-->
<textarea name="info" id="" ></textarea>
</p>
<!-- 9.隐藏域 -->不会显示,自己默认设置记录呢
<input type="hidden" name="isVip" value="YES">
<!-- 10.普通按钮 -->
<input type="button" value="普通按钮">
<!-- 7.个人描述 -->
<input type="submit" value="注册">
<!-- 8.重置 -->
<input type="reset">
</form>
/* 2.内边距 */
/* padding-left:20px;
padding-right:20px; */
/* 3外边距 */
/* margin-top:100px; */
/* 边框和内边距的改变 会改变盒子的真实宽高 */
/* 盒子的真实高度== border的上下+padding的上下;
盒子的真实宽度== border的左右+padding的左右; */
/* //水平居中 */
margin: 0 auto 0;
}
/* //固定值计算 window变小变大不能适配 */
/* margin-left:540px; */
/* margin负值 边框合并 */
margin: -10px auto 0;
/* 垂直外边距发生合并: 谁大取谁 */
margin-bottom: 10px;
/* 解决塌陷问题
1.设置父元素的border
2.设置父元素的overflow:hidden;
3.使用伪类:一般都使用第三种
*/
/* border: 1px solid peru; */
/* overflow:hidden; */
}
.clearfix:before{
content:"";
display: table;
}
.smallbox{
width: 200px;
height: 200px;
background-color:rgb(120, 110, 119);
/* 盒子嵌套的时候, 设置内部盒子的margin-top 有塌陷的现象 */
margin-top:100px;
转载于:https://www.cnblogs.com/lvhonglei-python/p/7476861.html
02html和css相关推荐
- ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题 思路 问题:首先,li 浮动后,添加边框,则 中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
- 【css】基础学习总结
填充部分: 1.css概念 2.如何用css控制页面样式(2种方式,写在页面内,链接CSS样式文件) 3.介绍了不同的选择器(3种) 4.选择器的声明:集体,嵌套 5.css继承:父子嵌套继承 6.C ...
- Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss
错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...
- CSS 选择器:BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
- CSS Modules
css-loader 提供了一种叫做 CSS Modules 的方案,可以帮我们自动生成唯一的类名,不会和其他模块的命名出现冲突 要使用 CSS Modules 有几个步骤,首先需要在 webpack ...
- css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是 类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑 它们 都 ...
- 前端之css基础学习(更正版)
css是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 简单的说css的引入就是为了使得HTML语言能够 ...
- div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
- CSS单位分析及CSS颜色表示法、颜色表(调色板)
CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相 ...
最新文章
- Ubuntu 系统输入法设置
- 如何使用gensim来加载和使用词向量模型word2vec
- python编程软件在哪里下载-Thonny(Python编程工具)
- Delphi下的COM编程
- 用代码获取Oracle服务名清单
- Windows下安装谷歌测试框架Googletest并测试小例子
- Mr.J-- jQuery学习笔记(九)--事件绑定移除冒泡
- mysql字符集解释_MySQL字符集详解
- 更改 Office 解决方案的安装路径
- Qt qss问题总结
- C++之log4cpp库
- 编程猫的python咋样_编程猫的课程怎么样?
- ASP.NET CORE WEB应用(有数据库操作的应用)发布到IIS
- Angular /Angular cli安装教程
- 计算两个时间戳之间的自然天数
- 搜狗输入法4.2android,搜狗手机输入法增加适配系统 推Android专用版
- 飞信java版2013_飞信(Fetion) 2013青春版
- javaweb_一个用户注册的界面
- 潘建中-632007060420
- 用python的opencv库打开ip摄像头
热门文章
- mysql 修改表结构提示 MySQL said: Table is read only
- 面试:如何从 100 亿 URL 中找出相同的 URL?
- 触目惊心,超过 8000+ 漏洞 Redis 暴露在云端!
- 可能是第二好的 Spring OAuth 2.0 文章,艿艿端午在家写了 3 天~
- spring-boot:run 是怎么运行 Spring Boot 项目的?
- 搞定高并发,岂能不懂Synchronized底层原理?
- 你真的理解零拷贝吗?
- 转向AIOps之前,你应该做好哪些准备?
- Nomad技术手册:整体架构(Architecture)
- 青少年蓝桥杯_2020_steam考试_中级组_第三题