我现在正在学习CSS。我做了这个网页: https://codepen.io/manu506/project/editor/DQyMvM
/*************************************************************/
/* BASIC SETUP */
/************************************************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #ffffff;
color: #000000;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 18px;
text-rendering: optimizeLegibility;
}
/*************************************************************/
/* REUSABLE COMPONENTS */
/************************************************************/
.row {
width: 1140px;
margin: 0 auto;
}
h1 {
font-family: 'Merrriweather', serif;
font-weight: 900;
font-size: 500%;
}
h2 {
font-family: 'Merrriweather', serif;
font-weight: 400;
font-size: 200%;
}
h3 {
font-family: 'lato', 'arial', sans-serif;
font-weight: 900;
font-style: italic;
}
p {
font-family: 'lato', 'arial', sans-serif;
font-weight: 400;
font-size: 130%;
}
.btn {
display:inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border: 1px solid #0f0f0f;
color: #0f0f0f;
transition: background-color 0.3s, color 0.3s;
}
.btn:hover, .btn:active {
background-color: #0f0f0f;
color: #ffffff;
}
.btn:visited {
background-color: #0f0f0f;
}
/*************************************************************/
/* Navigation */
/************************************************************/
/* Header Background */
header {
background-image:linear-gradient(#000000dc, #000000dc), url(https://image.ibb.co/irJBJz/header.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* Logo */
.logo {
font-family: 'Merrriweather', serif;
font-weight: 400;
font-size: 250%;
color: #fff;
display: inline-block;
position: absolute;
left: 2%;
}
/* Navigation Menu */
.nav-menu {
float: right;
list-style: none;
position: absolute;
right: 2%;
top: 0%;
}
.nav-menu li {
display: inline-block;
margin: 30px;
}
.nav-menu li a:link,
.nav-menu li a:visited {
color: #fff;
text-decoration: none;
padding: 4px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.5s;
}
.nav-menu li a:hover,
.nav-menu li a:active {
border-bottom: 2px solid #fff;
}
/* Header Mid Text Box */
.text-box {
position: absolute;
width: 100%;
color:#fff;
text-align: center;
top: 25%;
}
/******** Section 1 *************/
.section1 {
margin-top: 8%;
}
.section1-text {
margin-top: 25%;
}
.section1-text h2 {
font-size: 350%;
}
.section1-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section1-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 90px;
margin-top: 5px;
margin-bottom: 5px;
}
.section1-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/* *********** Section 2 ************ */
.section2 {
margin-top: 10%;
width: 100%;
}
.section2-text {
width: 33.33%;
margin-top: 10%;
}
.section2-text h2 {
font-size: 350%;
}
.section2-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section2-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 90px;
margin-top: 5px;
margin-bottom: 5px;
}
.section2-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 3 *************/
.section3-text {
display: block;
margin-top: 18%;
}
.section3-text h2 {
font-size: 350%;
}
.section3-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section3-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 105px;
margin-top: 5px;
margin-bottom: 5px;
}
.section3-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 4 *************/
.section4 {
margin-top: 8%;
}
.section4-text {
margin-top: 18%;
}
.section4-text h2 {
font-size: 350%;
}
.section4-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section4-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 100px;
margin-top: 5px;
margin-bottom: 5px;
}
.section4-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 5 *************/
.section5 {
width: 100%;
margin-top: 8%;
}
.section5-img {
padding-left: 10%;
}
.section5-text {
width: 33.33%;
margin-top: 14%;
}
.section5-text h2 {
font-size: 350%;
}
.section5-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section5-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 187px;
margin-top: 5px;
margin-bottom: 5px;
}
.section5-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 6 *************/
.section6 {
margin-top: 11%;
text-align: center;
}
.section6 span {
display: block;
font-size: 70%;
}
.section6 h3 {
margin: 2%;
font-size: 200%;
}
.section6 p {
display: block;
padding-top: 25px;
padding-bottom: 25px;
}
/******** Section 7 *************/
.section7 {
margin-top: 8%;
margin-bottom: 8%;
width: 100%;
background-color: #161616;
text-align: center;
}
.section7-services {
margin: 0;
}
.blur-image1 {
width: 100%;
height: 700px;
background-image: url("https://image.ibb.co/m9q2Qe/services.jpg");
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: opacity 0.5s;
}
.blur-image1:hover {
opacity: 1;
}
.service-text-box {
display: inline-block;
width:35%;
padding-top: 35px;
padding-bottom: 35px;
text-align: center;
border: 2px solid white;
background-color: #fff;
transform: translate(0, -450px);
}
.section7-work {
margin: 0;
}
.blur-image2 {
width: 100%;
height: 700px;
background-image: url("https://image.ibb.co/muF2Qe/work.jpg");
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: opacity 0.5s;
}
.blur-image2:hover {
opacity: 1;
}
.work-text-box {
display: inline-block;
width:35%;
padding-top: 35px;
padding-bottom: 35px;
text-align: center;
border: 2px solid white;
background-color: #fff;
transform: translate(0, -450px);
}
我以https://www.dtelepathy.com/为设计灵感。但是我无法达到相同的结果。如果您查看css和html,则从第1部分到第7部分,所有图像都超出了浏览器边界。如果我使用overflow:hidden属性,那么我的图像将被裁剪掉,这是我不想要的。你能帮我吗? 我正在使用以下网格系统:http://www.responsivegridsystem.com/
答案 0 :(得分:0)
将这些属性添加到img
标签
img {
width: 100%;
height: auto;
font-size: 0;
}
如果width属性设置为100%,则图像将响应并放大和缩小:
答案 1 :(得分:0)
使用此代码:
此CSS样式用于将滚动条的宽度设置为“ 0”
所以我们可以隐藏滚动条,而不会隐藏溢出。
::-webkit-scrollbar { width: 0px;}