学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

一.css的属性

是否重复: 1.repeat-x在x轴重复;2.repeat-y在y轴重复;3.no-repeat;不重复

【1】背景颜色

实例及运行效果：

#div1 {width: 500px;height: 400px;/* 背景颜色 */background-color: antiquewhite;

【2】背景图片：

实例及运行效果：

/* 背景图片 */background-image:url(./img/xiao.jpg) ;
<div id="div1">hello,我是小粉；</div>

【3】是否重复： 1.repeat-x在x轴重复;2.repeat-y在y轴重复;3.no-repeat;不重复

实例：

background-repeat: repeat-x;

【4】字体颜色，文本修饰，对齐方式：

实例：

#div2{/* 字体颜色 */ color: #00FFFF;/* 对齐方式 left  center right*/text-align: center;/* 文本修饰 */text-decoration: line-through overline underline;}

4.1去除文本效果去除超链接的下滑线

a{/*去除文本效果  去除超链接的下滑线*/text-decoration: none;}

【5】网页文本对齐方式：left向左对齐，right向右对齐，center居中对齐，justify两端对齐

#p1{/* 对齐方式：left，right，center，justify两端对齐*/text-align: justify;}
<p  id="p1">As for energy, solar power has to be a priority, in addition to carrying some of the nuclear batteries already in use for small devices. With a monthly cycle of day and night on the moon, we could build mirrors around the protrusions of the ring to reflect sunlight,shine it on to the permanent shadow of the crater, or illuminate it, or heat it, or generate electricity. Carrying solar panels to the moon in large numbers is not practical.The lunar soil is 45% silicon dioxide, which can be extracted to make solar panels.</p>

【6】display属性:none：隐藏元素；block：显示元素

h2{/* display属性:none：隐藏元素；block：显示元素*/display: none;}

【7】浮动

实例及运行效果：

#d1{width: 100px;height: 100px;background-color: #AA007F;/* 浮动，左浮动*/float:left;}#d2{width: 100px;height: 100px;background-color: #ff55ff;/* 浮动，左浮动*/float:left;}
<!--浮动--><div id="d1"></div><div id="d2"></div>

未加浮动：

加上左浮动

二.css盒子模型

盒子模型：padding内边距；border边框；margin：外边距
       borber边框：设置边框的颜色，样式，宽度
       border：颜色样式宽度 eg：border：red soild 1px
       单独设置边框的颜色，样式，宽度，
               border-width
               border-style
               border-color
               设置是否将表格边框折叠为单一边框
               属性值：separate（默认，单元格边框独立），collapse（单元格边框合并）
       padding 内边距
           设置元素的所有内边距的宽度，或者设置各个边上内边距的宽度
           单独设置各边的内边居：padding-top padding-left padding-bottom padding-right
       margin 外边距
           设置一个元素所有外边距的宽度，或者设置各个边上外边距的宽度
           单独设置各边的外边距：margin-top,margin-left,margin-right,margin-bottom
           默认按照上右下左的顺序设定：设置1个值：上右下左都一致，设置2个值：上下一致，左右一致，设置3个值：上右下，左和右一致

实例及运行效果：

<style type="text/css">#d1 {width: 100px;height: 100px;background-color: #FAEBD7;/* 设置边框 */border: #FF55FF 5px outset;/* 设置内边距 */padding: 15px;padding-left: 20px;padding: 10px 20px;/* 设置外边距 */margin-top: 100px;}</style>
<div id="d1"></div>

三 .基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单

<style>
.dropdown {position: relative;display: inline-block;
}
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);padding: 12px 16px;
}
.dropdown:hover .dropdown-content {display: block;
}
</style>
[mycode3]
[mycode3 type="html"]
<div class="dropdown"><span>鼠标移动到我这！</span><div class="dropdown-content"><p>菜鸟教程</p><p>www.runoob.com</p></div>
</div>

实例解析

HTML 部分：

我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。

使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

四.导航栏

垂直实例

ul {list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1;
}li a {display: block;color: #000;padding: 8px 16px;text-decoration: none;
}/* 鼠标移动到选项上修改背景颜色 */
li a:hover {background-color: #555;color: white;
}

水平实例

ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
}li {float: left;
}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}/*鼠标移动到选项上修改背景颜色 */
li a:hover {background-color: #111;
}

五.网页布局

* {box-sizing: border-box;
}body {font-family: Arial;padding: 10px;background: #f1f1f1;
}/* 头部标题 */
.header {padding: 30px;text-align: center;background: white;
}.header h1 {font-size: 50px;
}/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航条链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接颜色修改 */
.topnav a:hover {background-color: #ddd;color: black;
}/* 创建两列 */
/* Left column */
.leftcolumn {   float: left;width: 75%;
}/* 右侧栏 */
.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;
}/* 图像部分 */
.fakeimg {background-color: #aaa;width: 100%;padding: 20px;
}/* 文章卡片效果 */
.card {background-color: white;padding: 20px;margin-top: 20px;
}/* 列后面清除浮动 */
.row:after {content: "";display: table;clear: both;
}/* 底部 */
.footer {padding: 20px;text-align: center;background: #ddd;margin-top: 20px;
}/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {.leftcolumn, .rightcolumn {   width: 100%;padding: 0;}
}/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {.topnav a {float: none;width: 100%;}
}

更多细节内容戳下列网址了解：

下拉菜单：CSS 下拉菜单 | 菜鸟教程 (runoob.com)

导航栏：CSS 导航栏 | 菜鸟教程 (runoob.com)

网页布局设置：CSS 网页布局 | 菜鸟教程 (runoob.com)

第四次网页前端学习笔记（css）相关推荐

第四次网页前端培训笔记（css常用属性设置）
4.1.背景 4.1.1.background-color(设置元素的背景颜色) <style type="text/css">#div1{width: 100px;h ...
第四次网页前端培训（CSS常用属性和盒子模型）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibilin 1.安装编译器 VS Code:Visual St ...
厚积薄发前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...
这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接写在前面归纳总结了几种比较ok的方法,左右 ...
Web前端学习笔记——CSS京东案例、BFC
京东项目(一) 京东项目介绍项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需 ...
2016/12/10前端学习笔记CSS结束+JS开始。
18 浏览器兼容问题:IE6不支持小于12px的盒子,兼容方式: height:4px; _font-size:1px; IE6不支持overflow:hidden的方法清除浮动,所以,需要用 : ...
前端学习笔记--css案例
要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * {padding: 0;margin: 0; }body {font-size: 16px;color: burlywood; ...
第四次网页前端培训（CSS常用属性与盒子模型）
CSS常用属性背景 <head><meta charset="utf-8"><title>常用属性设置</title><st ...
【前端学习笔记 CSS系列二十二】justify
一.效果二.代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
前端学习笔记（HTMLCSS）（06）CSS盒子模型练习
前端学习笔记(HTML&CSS)(06) 练习一:图片列表 <!DOCTYPE html> <html lang="en"> <head> ...

第四次网页前端学习笔记（css）

学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

一.css的属性

二.css盒子模型

三 .基本下拉菜单

实例解析

四.导航栏

五.网页布局

第四次网页前端学习笔记（css）相关推荐

最新文章

热门文章