通常我们在写input时,它的背景文字框都是灰色的,样式很单一,其实它可以做的更好看的,在CSS3中就专门提供了一属性placeholder来实现输入框的美化。接下来,就为大家展示下:
HTML:
CSS:
效果:
对于input输入框的背景提示信息(placeholder)的美化虽然只是对网站应用的小小点缀,但正是这样细节上的小差别将你的网站和别人的网站区别开来。IE10也支持了placeholder属性哦!
切版 qieban(.cn)
先让我们回顾下前端入门——html 超链接的用法 <a href="url"> , 超链接是一个非常伟大的发明,它链接了整个互联网,没有它就没有互联网。
超链接在发明之初就给它设计了一个默认的样式,就是蓝色带下划线的样式,如下图:
默认样式
关于为什么超链接是蓝色带下划线的历史,可以参考这里:https://baijiahao.baidu.com/s?id=1710334071632114373&wfr=spider&for=pc
当网页变得越来越丰富,用户的需求越来越高的时候,这样的样式已经不符合大众的审美,所以通过css来美化超链接非常有用和有趣。
链接可以使用任何 CSS 属性(例如 color、font-family、background 等)来设置样式。
如下图:
除此之外,可以根据链接状态来设置不同样式,链接状态分别有:
如下示例:
/* 未被访问的链接 */
a:link {
color: red;
}
/* 已被访问的链接 */
a:visited {
color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {
color: hotpink;
}
/* 被选择的链接 */
a:active {
color: blue;
}
未被访问的链接
已被访问的链接
将鼠标悬停在链接上
被选择的链接
如果为多个链接状态设置样式,请遵循如下顺序规则:
以上是链接的各种伪类,描述了链接的不同状态,你可以试试在不同状态下给设置不同的属性,比如背景色,字体或者文本修饰等等。
链接通常用来当做按钮使用,点击它跳转页面或执行一些事件或js函数。如下示例:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
定义了一个背景色为红色的按钮,如下图:
注意:如果想在点击这个按钮后禁止跳转页面,可以给href属性设置javascript:void();,在以后会讲到JavaScript在网页中的使用,这里你已经看到,在href属性中通过Javascript:的形式可以执行一段js语句或函数,这里void()就是阻止链接跳转。
上面只是一个简单的例子,当然你也可以制作更漂亮的按钮,比如加上圆角、阴影、或渐变背景等。
当鼠标移动到链接上时,你会看到鼠标变成一个手形,通过css cursor 属性可以改变鼠标指针的形状,如下图:
可以尝试按照上面的属性依次练习一遍,链接的样式到此就介绍完了,感谢关注。
上篇:前端入门——css字体和文本
、页面使用CSS的好处:
有效的传递页面信息。
使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户。
可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容。
具有良好的用户体验。
2、美化网页的一些基本样式
A:字体样式:
font-family设置字体类型font-family:"隶书";
font-size设置字体大小font-size:12px;
font-style设置字体风格font-style:italic;
font-weight设置字体的粗细font-weight:bold;
font在一个声明中设置所有字体属性font:italic bold 36px "宋体";
举例:
body{font-family: Times,"Times New Roman", "楷体";}
h1{font-size:24px;} 单位->px:像素
h2{font-style:oblique;}
p{font-weight:bold;}
p span{font:oblique bold 12px "楷体";}
B:文本属性:
color设置文本颜色color:#00C;
text-align设置元素水平对齐方式text-align:right;
text-indent设置首行文本的缩进text-indent:20px;
line-height设置文本的行高line-height:25px;
text-decoration设置文本的装饰text-decoration:underline;
C:排版文本段落:
水平对齐方式:text-align:left|right|center|justify;
left把文本排列到左边。默认值:由浏览器决定
right把文本排列到右边
center把文本排列到中间
justify实现两端对齐文本效果
首行缩进:text-indent:em或px
行高:line-height:px
文本修饰:text-decoration:none|underline|overline|line_through
值说明
none默认值,定义的标准文本
underline设置文本的下划线
overline设置文本的上划线
line-through设置文本的删除线
垂直对齐方式:vertical-align属性:middle、top、bottom
文本阴影:text-shadow : color x-offset y-offset blur-radius;
D:背景颜色和背景图片:
background-color:"red";
background-image:url(图片路径);
background-repeat:
沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
background-position:X、Y方向关键词 水平方向的关键词:left、center、right
垂直方向的关键词:top、center、bottom
举例:
.title {
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
}
线性渐变:linear-gradient ( position, color1, color2,…)
3、举例:
<head>
<title>家用电器</title>
</head>
<link rel="stylesheet" href="jiayongdianqi.css">
<body>
<div class="container">
<h2>家用电器</h2>
<div class="type">
<h6><a href="#">大家电</a></h6>
<ul>
<li> <a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a></li>
<li> <a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#"> 热水器</a></li>
<li> <a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a></li>
</ul>
<h6><a href="#">生活电器</a></h6>
<ul>
<li> <a href="#">电风扇</a> <a href="#">净化器</a> <a href="#">吸尘器</a></li>
<li> <a href="#">净水设备</a> <a href="#">挂烫机</a> <a href="#"> 电话机</a></li>
</ul>
<h6><a href="#">厨房电器</a></h6>
<ul>
<li> <a href="#">榨汁机</a> <a href="#">电压力锅</a> <a href="#">电饭煲</a></li>
<li> <a href="#">豆浆机</a> <a href="#">微波炉</a> <a href="#"> 电磁炉</a></li>
</ul>
<h6><a href="#">五金家装</a></h6>
<ul>
<li> <a href="#">淋浴/水槽</a> <a href="#">电动工具</a> <a href="#">手动工具</a></li>
<li> <a href="#">仪器仪表 </a> <a href="#">浴霸/排气 </a> <a href="#"> 灯具</a></li>
</ul>
</div>
</div>
</body>
</html>
li{
/* 去圆点 */
list-style: none;
}
/* 分类页面总宽度 */
.container{
width: 500px;
}
a{
/* 去超链接下划线 */
text-decoration: none;
}
/* 大标题字体 */
.container>h2{
font-size: 18px;
color: white;
font-weight: bolder;
line-height: 50px;
text-indent: 2px;
/*从上到下,0%开始颜色。50%颜色。70%颜色 */
background: linear-gradient(to bottom,#0467ac,#63a7d6,#b6dbf5);
}
css代码:
/* 所有电器分类内容 */
.type{
/* 首行缩进 */
text-indent: 4.5em;
/* 左外边距40px */
margin-left: 40px;
}
/* 电器分类 */
.type>h6{
font-size: 14px;
font-weight: bolder;
line-height: 30px;
background: linear-gradient(to bottom,#e4f1fa,#bddff7,#e4f1fa);
}
/* 电器分类中的A标签 */
.type>h6>a{
color:#0467ac;
}
/* 电器分类中的A标签鼠标悬浮效果 */
.type>h6>a:hover{
text-decoration: underline;
}
/* 分类内容字体 */
.type>ul>li{
font-size: 12px;
line-height: 26px;
}
/* 分类内容字体里面的A标签 */
.type>ul>li>a{
color: #969696;
}
/* 分类内容字体里面的A标签悬浮效果 */
.type>ul>li>a:hover{
color: #804000;
text-decoration: underline;
}
4、效果图链接:file:///D:/ruanjian/VS/wenjianxiangmu/htmlFive/jiayongdianqi.html
*请认真填写需求信息,我们会在24小时内与您取得联系。