CSS美化网页

最新推荐文章于 2024-09-10 07:07:39 发布

雁宝呀

最新推荐文章于 2024-09-10 07:07:39 发布

阅读量687

点赞数

本文链接：https://blog.csdn.net/weixin_42322106/article/details/81124369

版权

1、使用CSS可以：

有效的传递页面信息，使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容具有良好的用户体验。

2、<span>标签

<p>享受<span class="show">“北大式”</span>教育服务</p> <p>在北大青鸟，有一群人默默支持你成就 <span id="dream">IT梦想</span> </p> <p class="bird">选择<span>北大青鸟</span>，成就你的梦想</p>

3、字体属性

ont-style属性 normal(默认)、italic(斜体)和oblique(倾斜)

4、字体大小

font-size属性单位：px（像素）

5、字体样式

属性名	含义	举例
font-family	设置字体类型	font-family:"隶书";
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px "宋体";

分享一个今天的案例：

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Document</title>
       <style type="text/css">
.no{
height:40px;
line-height:40px;
}
.one{
font-size: 24px;
color: #ff0000;
font-family: Georgia;
font-weight: lighter;
}
.two{

}
.three{
background-image: url(tupian/网易4.jpg) ;
background-position: left center;
background-repeat: no-repeat;
}
.four{
background-image: url(图片.jpg);
background-position: left center;
background-repeat: no-repeat;
}
.five{
color: grey;
font-size:10px;
}
.six{
background:blue;
color: white;
font-size: 20px;

}

</style>
   </head>
   <body>
       <div class="no">
       <span style="font-size:23px;font-weight:bold;color:#000000;">网友跟帖</span>
       <span class="one">9,699 </span>人跟帖 <img src="../img图片.png" width="20px" height="20px" alt="图片不见了" border="0px"/>
       <span class="one"> 64,980 </span>人参与 <img src="../img图片2.png" width="20px" height="20px" alt="图片不见了" border="0px"/>
<img src="../img/图片1.png" width="22px" height="22px" alt="图片不见了" border="0px"/>手机发跟帖 <img src="../img/图片.jpg" width="20px" height="20px" alt="图片不见了" border="0px"/> 注册
<br>
<table border="1" cellspacing="0" cellpadding="0" width="700px" height="120px">
<tr>
<td style="background:url(tupian/wy.png) 35px center no-repeat; width:140px;height:120px;bordercolor:#CBCBCB;"></td>
<td style="background:url(tupian/wy2.png) 215px center no-repeat; width:560px;height:120px;bordercolor:#AAD1FE;"></td>
</tr>
<input class="three" type="text" placeholder=" 账号">
<input type="text" placeholder=" 密码" class="four">
<input type="checkbox">自动登录 <input type="checkbox">
<img src="../img/图片.png"><input class="six" style="width:30px; height:30px;" type="submit" value="登录并发表"><br>
<span class="five">网友评论仅供其表达个人看法
   </body>
</html>

##___：今天终于把div布局给弄明白了，由于在布局里的background-color这里死磕了很久，只要把基本的颜色单词记得就好了，要是有一个屏幕取色器就更好了，特别方便。很多东西都是需要自己去领悟的，所以真的能说出来分享的也没什么，只可意会不可言传，后期继续加强训练，多去看别人的案例和去模仿，我觉得只要每一天都在坚持一点点学习，会如愿以偿的，加油

!!!!!！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！