利用CSS制作背景变色的横向导航栏
1.表单
页面如下:
- <html>
- <head>
- <title>注册表单页面</title>
- </head>
- <body>
- <form name="form1" method="post" action="">
- <table width="500" border="1" align="center" cellpadding="0" cellspacing="2">
- <tr>
- <td width="143" height="25">姓名:</td>
- <td width="351"><input name="name" type="text" id="name" size="20"></td>
- </tr>
- <tr>
- <td height="25">年龄:</td>
- <td>
- <select name="age" id="age">
- <option value="5" selected>5</option>
- <option value="5" >6</option>
- <option value="5" >7</option>
- <option value="5" >8</option>
- <option value="5" >9</option>
- <option value="5" >10</option>
- <option value="5" >11</option>
- <option value="5" >12</option>
- </select>
- </td>
- </tr>
- <tr>
- <td height="25">性别:</td>
- <td>
- <input name="radiobutton" type="radio" value="radiobutton" checked>
- 男
- <input name="radiobutton" type="radio" value="radiobutton" >
- 女
- </td>
- </tr>
- <tr>
- <td height="25">家庭住址:</td>
- <td><input name="textfie2" type="text" size="40"></td>
- </tr>
- <tr>
- <td height="25">联系电话:</td>
- <td><input name="textfie3" type="text" size="15"></td>
- </tr>
- <tr>
- <td height="25">满意度评价:</td>
- <td>
- <input type="checkbox" name="checkbox" value="checkbox">非常满意
- <input type="checkbox" name="checkbox" value="checkbox">一般
- <input type="checkbox" name="checkbox" value="checkbox">非常差
- </td>
- </tr>
- <tr>
- <td height="25">意见:</td>
- <td>
- <textarea name="textarea" cols="40" rows="10"></textarea>
- </td>
- </tr>
- <tr>
- <td align="center">
- <input type="submit" name="Submit1" value="提交">
- <input type="reset" name="Submit2" value="重置">
- </td>
- </tr>
- </table>
- </form>
- </body>
- </html>
2.背景变换的导航菜单
2.1.菜单效果图如下
当鼠标点击菜单中的某一项时,此项的背景颜色发生变化,并且中间显示目录的长度变宽。
2.2 代码如下
- <html>
- <head>
- <title>一列宽度</title>
- <meta charset="utf-8" />
- <style type="text/css">
- #button{
- width: 500px;
- margin-top: 300px;
- margin-left:800px;
- font-family: 宋体;
- font-size: 12px;
- background-color:#000000;
- }
- #button ul{
- list-style: none;
- margin:;
- padding:;
- border: none;
- }
- #button li{
- margin:;
- border-bottom-width: 1px;
- border-bottom-style: solid;
- border-bottom-color:#FFEBCD;
- }
- #button li a{
- display: block;
- padding: 5px 5px 5px 1em ;
- background-color:azure;
- color:#000000;
- text-decoration: none;
- width: 80%;
- border-left-width: 50px;
- border-right-width: 50px;
- border-right-style: solid;
- border-left-style: solid;
- border-left-color: chocolate;
- border-right-color: aqua;
- }
- html>body #button li a{
- width: auto;
- }
- #button li a:hover{
- background-color:#FFEBCD;
- color:#000000;
- border-left-width: 45px;
- border-right-width: 45px;
- border-right-style: solid;
- border-left-style: solid;
- border-left-color:aqua;
- border-right-color: chocolate;
- }
- </style>
- </head>
- <body>
- <div id="button">
- <ul>
- <li><a href="#">首页</a></li>
- <li><a href="#">公司简介</a></li>
- <li><a href="#">最新动态</a></li>
- <li><a href="#">客房介绍</a></li>
- <li><a href="#">酒店服务</a></li>
- <li><a href="#">休闲娱乐</a></li>
- <li><a href="#">旅行社</a></li>
- </ul>
- </div>
- </body>
- </html>
代码分析:
利用#button定义div,包括宽度,右边框,填充的复合属性,字体,字号,背景颜色和字体颜色。
利用#button ul定义div下的ul对象的样式,包括列表属性list-style,边距margin,填充padding,边框border属性。
利用#button li 定义li对象的样式。
利用#button li a定义定义对象下的链接文字样式。
利用#button li a:hover定义li 对象下的链接文字激活样式。
ul是css布局中使用的很广泛的一种元素,主要用来描述列表的内容,每一个<ul></ul>中的内容为一个列表块,快中每一个列表数据用<li></li>来描述。
3.背景变换的横向导航栏
3.1.页面效果如下
开始页面
鼠标点击时的页面
3.2.代码
- <html>
- <head>
- <title>利用CSS制作横向导航</title>
- <meta charset="utf-8" />
- <style>
- #n li{
- float: left;
- font-family: 宋体;
- font-size: 60px;
- margin-top: 50px;
- margin-left:100px;
- }
- #n li a{
- color:ivory;
- text-decoration: none;
- padding-top: 4px;
- display: block;
- width: 300px;
- height: 80px;
- text-align: center;
- background-color:blue;
- margin-left: 4px;
- }
- #n li a:hover{
- background-color:#00FFFF;
- color:black;
- }
- </style>
- </head>
- <body>
- <div id="n">
- <ul>
- <li><a href="#">首页</a></li>
- <li><a href="#">学校概况</a></li>
- <li><a href="#">机构设置</a></li>
- <li><a href="#">人才培养</a></li>
- <li><a href="#">师资队伍</a></li>
- <li><a href="#">科学建设</a></li>
- <li><a href="#">科学研究</a></li>
- </ul>
- </div>
- </body>
- </html>
代码分析:首先定义了ul下的li对象,给#n li 指定了float:left属性,所有的li对象都向左浮动,从而形成横向的排列方式。
导航的关键在于a链接对象的样式控制,在这里使用#n li a{}给li 下的每一个链接对象编写了样式。
display:block使得a链接对象的显示方式由一段文本变为一个块状对象,这样就可以使用CSS的外边距,内边距,边框等属性给a链接标签上加一系列的样式,通过display:block的应用,对a标签元素设置宽度with,高度heigh,并在每一个a标签对象你之间使用margin-left:2px形成左侧的外边距像素为2像素,
利用# n li a:hover定义定义链接文字激活后的状态,利用background-color:设置激活后的背景颜色,利用color设置文字颜色。
4.改变按钮的北京颜色和文字颜色
1.按钮页面如下:
2.代码:
- <html>
- <head>
- <meta charset="utf-8" />
- <title>按钮的背景颜色和字体</title>
- <style type="text/css">
- input.ann{border: 1 solid ##D2691E;
- color: #000000;
- font-size: 50pt;
- font-style:normal;
- font-variant: normal;
- font-weight: normal;
- height: 100pt;
- width: 300pt;
- line-height: normal;
- background-color:#D2691E;
- }
- </style>
- </head>
- <body>
- <input type="submit" value="登录" name="Sumbit" class="ann" />
- <input type="reset" value="取消" name="close" class="ann" />
- </body>
- </html>
代码分析:定义一个名为ann的按钮样式,设置边框border为1,颜色,字号,字体风格和加粗都为正常,按钮的高度height,行高为正常,背景颜色为background-color。
利用CSS制作背景变色的横向导航栏的更多相关文章
- 如何使用css、布局横向导航栏
使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- 利用CSS制作脸书
很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息. 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片:另一部分是链接以及脸框 <div class=& ...
- html+css写出响应式侧边导航栏
html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...
- div+css+position实现简单的纵向导航栏
完成效果: 这应该是很简单的纵向导航栏了. OK,进入正题 首先,我们看上面的效果图可以分析得出,要实现这个效果需要用到的技术点 1.hover 2.position 3.布局 我认为在这个效果的实现 ...
- HTML&CSS基础学习笔记1.11—导航栏
上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...
- 利用css制作横向和纵向时间轴
Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...
- 利用CSS制作三角形
在我们看到类似于这样的图片时: 我们一般都会想,哎,这还不简单,用一张图片就可以了. 的确,用图片可以很轻松地做到.不过我们接下来要讨论的是: 如何用css也作出这样的效果. 首先,我们来定义一个 ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
随机推荐
- MVC学生管理系统-阶段IV(修改学生信息)
项目源码 :https://download.csdn.net/download/weixin_44718300/11091042 前期准备,主体框架, 学生列表显示 请看阶段一文章 添加学生信息 ...
- hihocoder:#1082 : 然而沼跃鱼早就看穿了一切(用string)
题目是这样的: 描述 fjxmlhx每天都在被沼跃鱼刷屏,因此他急切的找到了你希望你写一个程序屏蔽所有句子中的沼跃鱼("marshtomp",不区分大小写).为了使句子不缺少成分, ...
- vue实现CheckBox与数组对象绑定
实现需求: 实现一个简易的购物车,页面的表格展示data数据中的一个数组对象,并提供选中商品和全选商品checkbox复选框,页面实时显示选中商品的总金额: 分析: 1:使用v-for循环渲染arra ...
- matplotlib画图--Line Color
1.线形 2.标记 3.颜色
- POJ 1149:PIGS 网络流经典题
PIGS Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18345 Accepted: 8354 Description ...
- 利用mysecureshell搭建sftp服务
1.下载对应的mysecureshell-1.33-1.x86_64.rpm包 2.安装mysecureshell-1.33-1.x86_64.rpm 3.添加ftp用户 useradd ftp 4. ...
- 目录服务不能与此服务器复制,因为距上一次与此服务器复制的时间已经超过了 tombstone 生存时间。
1.PDC数据正常 2.其他DC无法复制,报如下错误:目录服务不能与此服务器复制,因为距上一次与此服务器复制的时间已经超过了 tombstone 生存时间. 3.直接强制复制即可 repadmin / ...
- 斐波那契数列 yield 和list 生成
def fab_demo4(max): a,n,b = 0,0,1 while n < max: yield b # 生成器走到这一步返回b,需要再次调用才能继续执行 a,b = b,a+b n ...
- Redis的数据结构和对象。
一.简单动态字符串(simple dynamic string--SDS) Redis使用SDS表示字符串值,键值对都用SDS实现.SDS中的字符数组buf以空字符串结尾,好处是可以直接重用一部分C字 ...
- 解决 urxvt “unknown terminal type.”
登录到远程服务器上后,有时执行某些命令会提示unknown terminal type. 这是因为远程ssh不支持urxvt,执行 export TERM=xterm-256color 或者在远程主机 ...