当前位置：主页 > 查看内容

小高不太行之前端——CSS样式 II

发布时间：2021-06-25 00:00| 有 位朋友查看

简介：小高不太行之前端——CSS样式基础下 提示还有一篇延申哦等等我qaq 提示 文章目录 小高不太行之前端——CSS样式基础下 三、重要的修饰对象和属性 一图片image 1.基本属性 2.透明度 3.图片廊 4.图像拼合 二文本和字体 1.文本text 2.字体font 三背景background……

小高不太行之前端——CSS样式（基础）下

提示：还有一篇延申哦，等等我qaq

提示：

文章目录

三、重要的修饰对象和属性

（一）图片image

1.基本属性

2.透明度

  • 属性的透明度是 opacity， Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。
<head>
	<meta charset="utf-8">
	<style>
	div.background
	{
	  width:500px;
	  height:250px;
	  background:url(img/back6.png) repeat;
	  border:2px solid black;
	}
	div.transbox
	{
	  width:400px;
	  height:180px;
	  margin:30px 50px;
	  background-color:#ffffff;
	  border:1px solid black;
	  opacity:0.5;
	  filter:alpha(opacity=60); 
	}
	div.transbox p
	{
	  margin:30px 40px;
	  font-weight:bold;
	  color:#000000;
	}
	</style>
	</head>
	 
	<body>
	 
	<div class="background">
	<div class="transbox">
	<p>这是一个透明度为0.5的透明框
	</p>
	</div>
	</div>
	 
	</body>

结果如下：
透明度示例

，

3.图片廊

通过设置若干个<div>标签来显示若干张图片，采取相同的格式添加不同的路径和图片描述
想要呈现相同的style则可以在css统一设置

<div class="img">
    <a target="_blank" href="图片路径">
      <img src="图片路径" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

4.图像拼合

图像拼合美化导航栏，效果绝绝子，用图片或者小图标代替文字去链接是不是瞬间就不枯燥了，我觉得是哈
重要的话说四遍，一定记得加display:block; 详情见上篇display属性二更部分，不要太心疼我找错的过程

<head>
<style>
#nav{position:relative;}
#nav li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#a{left:0px;width:46px;}
#a{background:url('路径') 0 0;}
#b{left:63px;width:43px;}
#b{background:url('路径') -47px 0;}
#navlist li, #navlist a{height:44px;display:block;}
//一定记得加display:block;
  一定记得加display:block;
  一定记得加display:block;
</style>
</head>
<body>
<ul id="nav">
  <li id="a"><a href="/"></a></li>
  <li id="b"><a href="/css/"></a></li>、
</ul>
</body>

菜菜小高介绍一下这段代码的思路：
核心还是一个列表，导航嘛
但是呢要给每一列加背景图片，赋给这些图片block的属性值，让它们在没有文字的时候也能独立显示。接着设置一下相对定位position让彼此定位，完美！

（二）文本和字体

1.文本text

文本是在做WEB的时候经常要用到的，所以需要熟练掌握
文本的属性大家对文本阴影感兴趣吗? 考虑二更哦

2.字体font

小高认为字体相比文本可能属性就比较少了
最主要的font-size同样也是通过像素来控制
font-weight控制字体粗细，取值为bolder/bold/normal/lighter,分别对应更粗/粗/正常/更细
写文章真的好耗时间，呜，其他不做过多讲解

（三）背景background

1.颜色color

小高精简一下偷个懒 ，此处对于color做一个统一的介绍，其他用到的地方就不一一赘述了、

CSS中，颜色值通常以以下方式定义:

  • 十六进制 - 如："#ff0000"
  • RGB - 如：“rgb(红,绿,蓝)” 取值皆在0-255之间
  • 颜色名称 - 如：“red” 有十七种官方颜色

3.背景图像

同样，单纯的图片皆有的属性就不啰嗦了，对于背景图像要求还真不少

  • background-repeat //当背景图片填不满背景的时候
    repeat-x 只有水平位置会重复背景图像
    repeat-y 只有垂直位置会重复背景图像
    no-repeat background-image不会重复
    难道你想让你的背景只有左上角被装饰吗，你的图片不想没有重复的充满容器吗？
    咳咳咳，再学一个告诉你啊
  • background-attachment //图像的固定
    scroll 背景图片随着页面的滚动而滚动，这是默认的。
    fixed 背景图片不会随着页面的滚动而滚动。
    local 背景图片会随着元素内容的滚动而滚动。
    -background- position //背景图像起始位置
    表示方式皆由x和y两个变量控制

  1. 由top/bottom/center/left/right组合
    （水平取值为左中右；垂直取值为上中下）

  2. 百分比（X% Y%）

  3. 像素（Xpx Ypx）

【小高秘籍】来听讲了

background-size:100% 100%; background-attachment: fixed;

对，就是它，you can try

（四）链接及导航栏

1.常规的链接

普通链接

可以给它们加你喜欢的颜色哦

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

链接框

话说链接框你有没有想到图片导航栏呢，我假装你想到了
其实这二者是由异曲同工之妙的，什么妙？display：block； 妙啊
只不过链接框是不过设置了1.内边距padding加上填充2.背景颜色background-color看起来像是一个框框罢了
哈哈哈，一副看 破钱 断(看破前端)的样子，不敢不敢

2.导航栏

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单
先介绍一波基础

垂直导航栏

<style>
ul {
  list-style-type: none; //移除列表前小标志
  margin: 0;
  padding: 0; //删除边距，（本身列表和左边是有点远的）
  /*设置全屏高度或宽度，一般是位于左面的导航条
  height:100%
  width：100%
  */
}

li a {
  display: block;  //它它它又来了
  width: 66px;     //规定的哦
  background-color: #999AAA;
}
</style>
垂直导航条

在垂直导航栏的基础上，让鼠标移动到某栏的时候变色，就变成垂直导航条，在各大网站应用还是很普及的

li a:hover {
    background-color: #555;
    color: white;
}

水平导航栏

内联列表项

给<li>标签添加内联显示，就在水平上展示

li
{
display:inline;
}
浮动列表项

浮动<li>标签，并指定为 <a> 标签的元素宽度

li
{
	float:left;
}

ha 主要想讲的就是那个图标导航栏，详见上【图片拼合技术】

（五）表格 表单 下拉列表

1.表格

虽然表格布局不常用，但是对于后台数据，或者是要呈现给用户的表格也是有美观的需求的
表格CSS其中border和bord-bottom 属性值的第二项style的取值参考【CSS I/盒子模型/bottom】

2.表单

<style> 
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('img/searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>

运行结果如下：
seach从上述对于搜索框的简单渲染来看，对于表单，CSS是通过input【type=text/button/number/password/……】等等属性选择器，增加背景颜色，边框属性等

对于这一块，更丰富的介绍请点击这里

3.下拉列表

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

基本思路：

  • 建立鼠标要移动到的指定元素class="a"
  • 建立隐藏的信息区域class="b" 一定要加上display: none;让它隐藏
  • 建立连接.a:hover .b { display: block; }
  1. 在1的基础上允许用户选取列表中的某一项
    基本思路：
    在1.基础上要给隐藏区域的内容加上链接并进行渲染
    【注意】此时对于class="a"要定义成button

总结

CSS 2号文呢，主要对象是前端设计经常渲染的一些对象，由共性引入，再对它们的特性进行详细的介绍，和CSS I篇共同构成了CSS的基础

下期预告 CSS延伸

；原文链接：https://blog.csdn.net/m0_46568449/article/details/115536534
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：PMP 结合代码报名经验总结 下一篇：用 JavaScript 实现三次贝塞尔动画库 - 前端组件化

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐