__x__(31)0908第五天__导航条的练习 <ul> 版本

【x(31)0908第五天__导航条的练习 <ul> 版本】的更多相关文章

x(31)0908第五天__导航条的练习 <ul> 版本

效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>湖南城市学院</title> <link rel="stylesheet" type="text/css" href="css/hncu.css" /> </head> <bo…

x(30)0908第五天__导航条的练习 <div>版本

效果图: html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>湖南城市学院</title> <link rel="stylesheet" type="text/css" href="css/hncu.css" /> </head> <b…

高度塌陷在文档流中,父元素的高度默认是被子元素撑开的. 但是当为子元素设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱变成 BFC块级格式化环境根据 W3C 标准,元素都有一个隐含的属性 “Block Formatting Context” 该属性可以打开/关闭,默认是“关闭”. 当开启BFC后,元素将具有如下特性: 1. 父元素的垂直外边距不会和子元素重叠. 2. 不会被浮动元素所覆盖,会在浮动元素的旁边显示. 3. 可以包含浮…

x(34)0908第五天__ 定位 position

position 定位指将原始摆放到页面的任意位置. 继承性:no 默认值:static 没有定位,原始出现在正常的文档流中可选值: static : 默认值,元素没有开启定位 relative : 开启元素的相对定位 absolute : 开启元素的绝对定位 fixed : 开启元素的固定定位,固定定位也是绝对定位的一种. 当开启 position 定位后,可以使用 left,top,right,bottom 进行偏移设置. 1. position…

x(35)0908第五天__ 层级 z-index

如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index, 则从代码结构上下面的元素会盖住上面的元素. z-index 层级: 通过 z-index 属性设置元素的层级. z-index : 正整数; 层级越高 ,越优先显示在最上面. z-index: 1; 大于没设置 z-index 的元素对于没有开启定位的元素,z-index 无效. 父元素层级再高,也不会盖住子元素.…

x(36)0908第五天__背景 background

1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 background-image: url(img/cat.gif); 如果图片大于元素,则会显示图片左上角部分. 如果图片和元素一样大,则会全部显示. 如果图片小于元素,则图片会 x 横向, y 纵向平铺铺满元素. 可以同时设置background-color,作为图片的底色. 4. 背景图片重复方式 …

为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性

会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. 假如要布局出这样简单导航条效果比如以下代码: 1.可以使用Ul li布局导航条 <ul> <li><a href="http://www.divcss5.com/">网站首页</a> <li><a href="…

x(32)0908第五天__Photoshop的基本操作

1. 设置 Photoshop 的单位为像素px 2. 标尺显示与隐藏 Ctrl + r 3. 放大与缩小 Ctrl + 1 放大到100% Ctrl + 0 适应屏幕 Alt + 鼠标滑轮 4. 查看矩形框选中目标的width和height F8 5. 辅助线 Ctrl + H 隐藏 / 显示 6. 前景色取色器取色…

x(35)0908第五天__opacity 透明度

opacity 透明度设置一个 0 - 1 之间的值. opacity: 0; 完全透明 opacity: 0.5 半透明 opacity: 1; 完全不透明缺点: IE8及以下都不支持 opacity . IE8及以下透明度 : filter: alpha(opacity=50); 此时,透明度 opacity 取 0-100 为了兼容所有浏览器,设置 div 为半透明 div{ opacity: 0.5; filter: alpha(opacity=50); }…

x(37)0909第五天__背景图按钮

link,hover,active三种按键状态,存放三张图片缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Sprite 雪碧图: 将三张图片整合为一张图片,在不同的伪类中通过设置 background-position 来切换图片. 一次请求一次加载,一次加载一张图片,相当于多张图片. 优势: 减小资源的大小,省了颜色表提高了访问效率实例效果: html代码: <!doctype html> <ht…

x(38)0909第五天__雪碧图的制作

1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .…

x(39)0909第五天__ 表格 table

表格表示一种格式化的数据,如课程表,银行对账单... ... 在网页中,使用 table 创建一个表格. html代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>表格</title> <link rel="stylesheet" type="text/css" href="c…

x(40)0909第五天__表格 table 的 css 样式美化

如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以以后编写代码,尽可能地写上 tbody,防止混淆. th 表头是特殊的 td “具有加粗,文字居中”的效果 . 为 table 添加边框: 1. 为 th,td 设置 border: 1px red solid; 2. 为 table 设置 /* 单元格之间的距离.*/ border-spacing: 0…

x(41)0909第五天__长表格

长表格银行流水,表格很长... 则需要将表格分为表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没写 tbody ,浏览器会自添加 tbody,并将所有的 tr 移入 tbody 好处: 可以分别设置样式. 打印时,利用分类处理多页表头,表尾的效果. 无顺序要求,已维护. 效果图: css代码: @charset "utf-8"; *{ margin: 0px; padding: 0p…

css -- 导航条

1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a hre…

Python第五章__模块介绍，常用内置模块

Python第五章__模块介绍,常用内置模块欢迎加入Linux_Python学习群群号:478616847 目录: 模块与导入介绍包的介绍 time &datetime模块 random os sys shutil json & pickle xml处理 configparser hashlib subprocess logging模块 re正则表达式一.模块与包介绍模块是某个功能代码的集合,模块是一种组织形式,它将彼此有关系的python代码组织到一个个文件中,模块可以包含可…

简学Python第五章__模块介绍，常用内置模块

Python第五章__模块介绍,常用内置模块欢迎加入Linux_Python学习群群号:478616847 目录: 模块与导入介绍包的介绍 time &datetime模块 random os sys shutil json & pickle xml处理 configparser hashlib subprocess logging模块 re正则表达式一.模块与包介绍模块是某个功能代码的集合,模块是一种组织形式,它将彼此有关系的python代码组织到一个个文件中,模块可以包含可…

bootstrap基础学习【导航条、分页导航】（五）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[导航条.分页导航](五)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="http://libs.…

JQM （功能栏、导航条）

在Mobile中导航条的基本结构: <div data-role="navbar"> ul>li>a </div> 其中含有“行(grid)”和“列(block)”的概念.Grid(网络布局系统也成为九宫格) “行(grid)”分为四种: (1).ui-grid-a 一行中只能放两列 blobk-a/b (2).ui-grid-b 一行中只能放三列 blobk-a/b/c (3).ui-grid-c 一行中只能放四列 blocka-a/b/c/d (…

Bootstrap 我的学习记录3 导航条理解

以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条默认样式的导航条导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 以下代码和注释是我学习过程中的理解 (注意引入必要的.css 和 .js查看) <!DOCTYPE html> <html lang="zh-CN"> <head> <m…

html通用导航条制作

第一步:先创建一个盒子,定义类为 nav,width 1000,height 40px,防京东的导航,与浏览器顶部100px,margin-top:100px,看的更直观第二步:使用无序列表放置,导航条的内容,这个可以自己定,这里设定 ul 宽1000px;高 40px:因为ul是块状元素,出现下面的样子,可以思考块状元素在firefox中和 ie6下面有什么不同.…

Swift - 导航条（UINavigationBar）的使用

与导航控制器(UINavigationController)同时实现导航条和页面切换功能不同. 导航条(UINavgationBar)可以单独使用,添加至任何的UIView中.UINavigationBar比较重要的属性为,左侧按钮,中间的标题,以及右侧按钮. 下面是一个使用样例,点击左侧加号会添加一个新的导航项,点击右侧Cancel会移除当前最上层导航项. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26…

Swift - 使用导航条和导航条控制器来进行页面切换

通过使用导航条(UINavigationBar)与导航条控制器(UINavigationController)可以方便的在主页面和多层子页面之间切换.下面通过一个简单“组件效果演示”的小例子来说明如何通过代码来进行页面的切换. 功能如下: 1,在AppDelagete.swift入口文件中把首页ViewController做了导航控件的封装 2,首页是一个表格列出几个Swift控件的名称 3,点击表格项即切换到对应组件展示页面,顶部的导航条标题变为该控件的名称,同时导航条左侧还有返回按钮 4,在…