javaee学习日记之css

最新推荐文章于 2024-04-26 16:40:43 发布
pojo
最新推荐文章于 2024-04-26 16:40:43 发布
阅读量279
点赞数
文章标签： css html
本文链接：https://blog.csdn.net/qq_39576261/article/details/77531469
版权
html简介(使用的开发工具及常用浏览器)
一.准备
1.浏览器:火狐,chrome(谷歌),opera(欧朋),IE,ietester(全要);
2.编辑器:DWCS6,sublime,EditPlus;(任选一种即可)
二.学习方法
1.记忆曲线--重复(反复提醒)
2.笔记{草记(关键词(笔记本)),整理笔记(详记(云笔记))}
三.前端简介:
1.html(超文本标记性语言)
用标签包含内容,标题标签(<h1></h1>),段落标签(<p></p>)
超文本标签(<a></a>),标签属性href:引用(绝对路径:全路径(如:C:\QMDownload\SoftMgr)
相对路径:(相对于当前文件的位置,下一级目录用"\"表示,上一级目录用"../"表示,与当前文件处于同一级目录直接访问(需写清文件名及后缀名如one.txt))
)
2.css
3.javascript
基本标签与列表和乱码
语言:与电脑进行交流,电脑不能思维,编程将自己的思维表现在代码上!
标签:
1.标题标签:<h1></h1>
2.段落标签:<p></p>
3.原价标签(内容上带删除线):<del></del>
4.加粗标签:<b></b>
5.斜体标签:<i></i>
6.下划线标签:<u></u>
7.列表标签:<ul><li></li></ul>(无序)
<ol><li></li></ol>(有序);
乱码:由于各国语言不同,各国有自己的编码库,当浏览器和html文件采用的编码库不同时,便产生了乱码。
解决方法：在html代码中声明编码：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />:这行代码表示此html文件采用utf-8编码!
图片标签
标签:图片标签:<img/>:属性(src="路径",width="宽px",height="高px",alt="图片显示不出时的文字"),给宽高的原因是:可以减少浏览器占用资源,
不写宽高时(流程为):
1.下载到内存,
2.计算宽高,
3.预留,
4.渲染,
写了宽高时就节约了计算宽高的资源。
页面构成：
标准（html5）:<!doctype html>
<html>:html标签
<head><!--头-->
<meta http-equiv="refresh" content="3,url=css.html"/>:刷新跳转(3秒后跳转到css.html)
<meta charset="utf-8"/><!--编码-->
<title>html5完整版</title><!--标题-->
<meta name="keywords" content="html,html5,web,憨豆,gif"/><!--关键词-->
<meta name="description" content="html的完整版(有头有体,像模像样,有意思)"/><!--描述-->
</head>

<body><!--体-->
<h1>憨豆先生的</h1>:标题标签
<img src="img/74ac35ff10e878441f31cae08db6f5fd.gif" height="250" width="500" alt="憨豆先生"/>:图片标签
<p>瞌睡</p>:段落标签
<img src="img/58c77994045b7873178e9e81e3ee0860.gif" height="267" width="286" alt="喵星人的舞蹈"/>:图片标签
<p>大胡子和猫</p>:段落标签
</body>
</html>
css:层叠样式表
如下例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="3,url=html.html"/>
<title>css层叠样式表</title>
<style>:样式标签

html:对html标签进行样式设定!
{
    width:100%;    :占屏宽100%
    height:100%;   :占屏高100%
    background:url(img/%E9%BE%99.jpeg);  :背景图片设定为img/%E9%BE%99.jpeg
}

div{
    background: red;    :背景颜色
    width: 100px;
    height: 100px;
    color: #0FF;           :字体颜色
    float: left;                 :浮动设置向以上标签右侧浮动
    }

h1{
    background:red;
    width:100px;
    height:100px;
    color:#0F0;
    float:left;
}

p{
    background:red;
    width:100px;
    height:100px;
    color:#00C;
    float:left;
}

del{
    background:red;
    height:100px;
    width:100px;
    color:#333;
    float:left;
    }
</style>
</head>

<body>

<img src="img/58c77994045b7873178e9e81e3ee0860.gif" height="267" width="286" alt="大胡子和猫"/>
<h1>小猫咪</h1>
<del>￥998.00</del>
<p>￥398.00</p>
<div>￥198.00</div>

</body>
</html>
css中设置背景图片及css选择器
目录管理:将html文件,css文件,img文件,以及其他资源分文件夹管理，
背景大小处理：background-size:cover(拉伸)。
背景平铺：background-repeat:(repeat(平铺),no-repeat(不平铺),repeat-x(横向平铺),repeat-y(纵向平铺))
背景固定:background-attachment:(fixed)(固定)
复合:background:url(../img/01.jpg) no-repeat fixed;background-size:cover;
引入标签:<link rel="stylesheet" href="css文件路径" type="text/css"/>
css选择器:
1:标签选择器 div{}
2:class选择器 .classname{}
3:群组选择器 div,.classname{}
4:id选择器 #idname{}
5:关联选择器 (div下的p) div p{}
6.伪元素选择器 a:link{}
多背景网页:
如下例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>360换机官网_首页</title>
<style>
*{margin:0; 
padding:0;}

html,body{
    height:100%;
    width:100%;
}
div{
    height:100%;
    width:100%;
    text-align:center;
}
.img_1{
    background:url(../img/01.jpg) no-repeat fixed;background-size:cover;
}

p{
    font-size:50px;
    color:#FFF;
}

.img_2{
    background:url(../img/02.jpg) no-repeat fixed;background-size:cover;
}
.img_3{
    background:url(../img/03.jpg) no-repeat fixed;background-size:cover;
}
.img_4{
    background:url(../img/04.jpg) no-repeat fixed;
}
</style>
</head>

<body>
<div class="img_1"></div>
<div class="img_2"></div>
<div class="img_3"></div>
<div class="img_4"></div>
</body>
</html>
css的盒子模型
盒子模型:content:(内容(宽/高))
padding(外边填充)写法:padding:50px,(均50px);
padding:20px 30px;(上下20px,左右30px)
padding:10px 20px 30px 40px(上,右,下,左)
border:(边框)
border:50px(边框线粗50px(均有))
包装形式:dashed(虚线)(写法:border:50px dashed:#FFF)
solid:(实线)(写法(同dashed))
单方向及多方向的边框线:
border-left:(左)
border-top:(上)
border-right:(右)
border-bottom:(下)
margin:(外边距)--(与其他盒子的间距)(写法与padding同)
特性(上下重叠,左右叠加)
居中:margin:0px auto;
css中的字体设置
font-family:"微软雅黑" "宋体";(可以设置多种字体,当浏览器不支持时优先级由前到后递减。)
font-size:10px;(设置字体大小(必须用偶数))
font-weight:100;(整数(100-900)(设置字体粗细))
font-style:italic;(字体倾斜)
text-decoration:none;(无下划线),line-through(删除线),overline(上划线),undeline(下划线)
样式初始化:
原则:凡是标签自带的样式,都不用。
浮动
浮动:float:left;(方向)
消除浮动:在浮动元素之后(添加盒子)设置:clear:both;
浮动的特性:有顺序(可以加在任何元素上)
bug:折行(解决方法:父元素加宽)
卡住(解决方法:设置盒子大小)
css3中圆角设置
圆角设置:border-top-left-radius: 10px;/*上左角*/
    border-top-right-radius: 10px;/*上右角*/
    border-bottom-right-radius: 10px;/*下右脚*/
    border-bottom-left-radius: 10px;/*下左脚*/
溢出隐藏:overflow:hidden;(将盒子中超过盒子的部分进行隐藏(或裁剪))
定位和元素隐藏和鼠标事件
定位:1.定义元素:方位控制(上/下,左/右),父盒子设置:position:relative;;
定位元素设置:position:absolute;
特点:层级高,特效使用;
元素隐藏:display:none;(隐藏);block:(显示,块级(前后自动添加换行符));inline:(显示,行内(为一行显示))
inline-block:(显示行内块级(一行内块级显示));
鼠标事件:hover;在需要添加鼠标事件的元素:li:hover{
};内添加改变属性等,就可以显示鼠标移入移出的效果.
表单
表单:收集信息;
表单元素:(属性:action="表单提交路径" method="提交方式"(有get(开发式)与post(加密))
<form action="http://www.baidu.com/s" method="get">
<input type="text" name="wd" size="100px" />(文本输入框)
<input type="submit" value="百度一下"/>(提交按钮)
<input type="button" value="点击"/>(普通按钮)
<input type="date" name="date"/>(日期输入框)
<input type="email" name="email"/>(邮件地址输入框)
<input type="password" name="pwd"/>(密码输入框)
</form>
sass简单入门
SASS:css的预处理器（文件后缀名为.scss）（增加了写代码的效率）
流程：1.建立项目目录
2.创建scss文件
3.创建html文件
4.将项目目录导入koala.exe中，刷新
5.生成一个与scss同名后缀名为.css的文件，将该文件导入html中
6.编写scss文件（书写方式与css类似）
SASS的编写：
1.嵌套：&（表示上一级）
.bigbox{
    background: #E9E3D7;
    text-align: center;
.titlebox{
    @extend .withde;
 }
}
上述代码表示将class名为bigbox的标签设置了样式及内部类名为titlebox的样式设置。
2.继承：@extend .类名或#id号（写了就继承了该类名的标签样式或ID号的标签样式）
3.混合：定义（@mixin 方法名（$参数名：“参数值”）{
定义样式及调用$参数}）
调用（@include 方法名(参数值)）
Sublime快捷键与表格和表单
快捷键：！+tab：快速生成HTML模板，html+tab（一样）
ul>li*3>a[href="#"]{abc$}+tab=<ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
div+p+div+tab=<div></div><p></p><div></div>;
ctrl+shift+d :(复制)
ctrl+/(注释)
表格：<table><tr><td></td></tr>
<tr><td></td></tr>
</table>(一个两行一列的表格)
表格单元格合并（colspan:左合；rowspan:下合）
css设置（ border-collapse: collapse;）(单线)
表单：标签<label></label>(定义焦点的作用)
pojo
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaee学习日记之css

html简介(使用的开发工具及常用浏览器)一.准备1.浏览器:火狐,chrome(谷歌),opera(欧朋),IE,ietester(全要);2.编辑器:DWCS6,sublime,EditPlus;(任选一种即可)二.学习方法1.记忆曲线--重复(反复提醒)2.笔记{草记(关键词(笔记本)),整理笔记(详记(云笔记))}三.前端简介:1.html(超文本标记性语言)用标签包含内容
复制链接

扫一扫