CSS3（图片、按钮、分页、框大小）

最新推荐文章于 2024-09-02 11:12:33 发布

初闻女人香

最新推荐文章于 2024-09-02 11:12:33 发布

阅读量141

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/m0_70251011/article/details/134848031

版权

图片

1.圆角图片

img { border-radius: 8px;}

2.椭圆形图片

img { border-radius: 50%;}

3.缩略图

img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;}
< img src=“图片” alt=“标记”>

4.缩略图作为链接

a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
< a href=“paris.jpg”>
< img src=“paris.jpg” alt=“Paris”>
< /a>

5.响应式图片
响应式图片会自动适配各种尺寸的屏幕。
实例中，你可以通过重置浏览器大小查看效果，
如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

img { max-width: 100%; height:
auto;}

按钮

在这里插入图片描述

<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>
<body>

<h2>CSS 按钮</h2>

<button>默认按钮</button>
<a href="#" class="button">链接按钮</a>
<button class="button">按钮</button>
<input type="button" class="button" value="输入框按钮">

</body>

我们可以使用background-color属性来设置按钮的颜色：

<style>
.button {
    background-color: #4CAF50; /* 绿色 */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */
.button5 {background-color: #555555;} /* 黑色 */
</style>

我们可以使用font-size属性来设置按钮的大小：

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

我们可以使用border-radius属性来设置圆角按钮

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

我们可以使用border属性来设置按钮边框颜色

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
...

鼠标悬停按钮：
我们可以使用：hover选择器来修改鼠标悬停在按钮上的样式
用transition-duration属性来设置“hover”效果速度

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
 
.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
...

我们可以使用box-shadow属性来为按钮添加阴影：

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
 
.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

按钮宽度：

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

移除外边距并添加 float:left 来设置按钮组:

.button {
float: left;
}

我们可以使用 border 属性来设置带边框的按钮组:

.button {
float: left;
border: 1px solid green
}

.btn-group button {
    background-color: #04AA6D; /* 绿色背景 */
    border: 1px solid green; /* 绿色边框 */
    color: white; /* 白色文本 */
    padding: 10px 24px; /* 内边距离、 */
    cursor: pointer; /* 指针/手形图标 */
    float: left; /* 并排浮动按钮 */
}

分页

如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

以下实例演示了如何使用 HTML 和 CSS 来创建分页：

<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
</style>
</head>
<body>

<h2>简单的分页</h2>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>

</body>

如果点击当前页，可以使用 .active 来设置当前页样式，鼠标悬停可以使用 :hover 选择器来修改样式：

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}

可以使用 border-radius 属性为选中的页码来添加圆角样式:

ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;}

面包屑导航

<style>
ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>

<h2>面包屑导航</h2>
<ul class="breadcrumb">
  <li><a href="#">首页 </a></li>
  <li><a href="#">前端 </a></li>
  <li><a href="#">HTML 教程 </a></li>
  <li>HTML 段落</li>
</ul>

</body>

框大小

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。在这里插入图片描述以上两个 < div> 元素虽然宽度与高度设置一样，但真实展示的大小不一致，因为 div2 指定了内边距:

<style> 
.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
}
</style>
</head>
<body>

<div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>

以下是两个

元素添加 box-sizing: border-box; 属性的简单实例。

.div1 {    width: 300px;    height: 
	100px;    border: 1px solid blue;    
	box-sizing: border-box;}

	.div2 {    width: 300px;    
	height: 100px;    padding: 50px;    
	border: 1px solid red;    box-sizing: border-box;}

结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。

以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有 - 这就是为什么 input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。

所有元素使用 box-sizing 是比较推荐的：