【发布时间】：2020-11-20 00:24:40
【问题描述】：
html{
scroll-behavior:smooth;
}
*{
margin:0px;
padding:0px;
box-sizing:border-box;
font-family: 'Montserrat', sans-serif;
}
wrapper{
width:100%;
height:100%;
}
body{
margin:0px;
padding:0px;
background:#f5f5f5;
width:100%;
height:100vh;
}
#cursor{
width:30px;
height:30px;
border:2px solid black;
border-radius:50%;
position:absolute;
box-sizing:border-box;
transition:.1s;
transform:translate(-50%, -50%);
pointer-events:none;
z-index:1000;
transition-duration:200ms;
transition-timing-function:ease-out;
transform: translate(-50%, -50%);
position: fixed;
}
@keyframes animate{
0%{
transform: translate(-50%, -50%) rotate(0 deg);
}
100%{
transform: translate(-50%, -50%) rotate(0 deg);
}
}
#landingImage{
background-image:url("LandingImage.png");
background-size:cover;
height:100vh;
width:100%;
display:flex;
flex-direction:column;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
header{
top:0px;
width:100%;
z-index:1000;
height:5rem;
}
}
.client-box:hover{
background-color:#e3e3e3;
transform-style:preserve-3d;
transform:scale(1.02);
transition:all ease .3s;
}
.form-container h2{
width:100%;
font-size:46px;
text-align:center;
margin-bottom:10px;
font-weight:lighter;
}
.form-container p{
font-size:20px;
text-align:center;
margin-bottom:10px;
font-weight:lighter;
}
.form-container .row100{
position:relative;
width:100%;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}
.form-container .row100 .col{
position:relative;
width:100%;
padding: 0 10px;
margin: 30px 0 10px;
transition:.5s;
}
.form-container .row100 .inputBox{
position:relative;
width:100%;
height:40px;
color:gray;
}
.form-container .row100 .inputBox input,
.form-container .row100 .inputBox.textarea textarea{
position:absolute;
width:100%;
height:100%;
background:transparent;
box-shadow:none;
border:none;
outline:none;
font-size:18px;
padding:0 10px;
z-index:1;
color:gray;
}
.form-container .row100 .inputBox .text{
position:absolute;
top:0;
left:0;
line-height:40px;
font-size:18px;
padding:0 10px;
display:block;
transition:.5s;
pointer-events:none;
}
.form-container .row100 .inputBox input:focus + .text,
.form-container .row100 .inputBox input:valid + .text{
top:-35px;
left:-10px;
}
input:focus{
color:white;
z-index:200;
}
.form-container .row100 .inputBox .line{
position:absolute;
bottom:0;
display:block;
width:100%;
height:2px;
background:gray;
transition:.5s;
border-radius:2px;
pointer-events:none;
}
.form-container .row100 .inputBox.textarea{
position:relative;
width:100%;
height:100px;
padding:10px 0;
}
.form-container .row100 .inputBox.textarea textarea{
height:100%;
resize:none;
}
.form-container .row100 .inputBox textarea:focus + .text,
.form-container .row100 .inputBox textarea:valid + .text{
top:-35px;
left:-10px;
}
input[type="submit"]{
border:none;
padding:7px 35px;
cursor:pointer;
outline:none;
background:gray;
color:white;
font-size:18px;
border-radius:5px;
left:50px;
}
.form-container{
width:50%;
margin:auto;
}
::-webkit-input-placeholder {
color: #595959;
}
:-moz-placeholder {
color: #595959;
}
::-moz-placeholder {
color: #595959;
}
:-ms-input-placeholder {
color: #595959;
}
/*form {
margin: 25px;
padding: 5px;
display: inline-block;
}
form input {
border: none;
background: transparent;
border-bottom: 1px solid #595959;
outline: none;
font-size:18px;
}
textarea{
width:600px;
height:200px;
max-width:800px;
max-height:400px;
}
*/
.formButton{
color:white;
background:#7d7d7d;
padding:10px 30px;
border:none;
font-size:17px;
margin:auto;
border-radius:5px;
transition:.35s;
margin-left:42%;
}
.formButton:hover{
background:#595959;
cursor:pointer;
}
.footer{
background:#dedede;
color:#7d7d7d;
height:300px;
position:relative;
}
.footer .footerBottom{
background:#cfcfcf;
color:#8c8c8c;
height:50px;
text-align:center;
position:absolute;
bottom:0px;
left:0px;
padding-top:20px;
width:100%;
}
.footer .footerContent{
height:300px;
display:flex;
}
.footer .footerContent .footerSection{
flex:1;
padding:25px;
border:1px solid white;
line-height:23px;
font-size:16px;
}
.footerSection li{
color:#8c8c8c;
}
.aboutDevelop{
width:100%;
height:100vh;
}
.dropdown-link:not(:nth-last-child(2)){
border-bottom:none;
}
.arrows{
z-index:1;
background-color:gray;
left:10%;
transform:scale(1.1) rotate(45deg);
transition:.5s;
}
.nav-link:hover .arrows{
background-color:#949494;
}
.dropdown .dropdown. .arrows{
display:none;
}
.arrow.down{
border: 1px solid white;
border-width: 3px 3px 0 0;
display: inline-block;
padding: 3px;
margin-left:4px;
margin-bottom:2px;
}
.nav-link > a > i{
font-size:1.1rem;
transform:rotate(45deg);
transition:.7s;
}
.dropdown i{
font-size:1rem;
transition:.7s;
}
.log-sign{
flex:initial;
padding:1.5rem 1.9rem;
justify-content:flex-start;
width:100%;
opacity:0;
transform:translateY(15px);
}
.nav-link:hover > a > i,
.dropdown-link:hover > a > i > .arrows{
transform:rotate(405deg);
}
.header1 > h1{
font-size:37px;
}
.header1 p{
font-size:27px;
}
.txt-rotate{
color:#d9d9d9;
}
.expert{
height:1350px;
}
.projTopWrapper{
top:150px;
}
.expertHeader{
top:120px;
}
.expertHeader h1{
font-size:37px;
}
.projectDescription{
margin-bottom:50px;
}
.about{
height:1650px;
}
.aboutHeader{
top:230px;
}
.aboutHeader h1{
font-size:37px;
}
.aboutHeader p{
font-size:16px;
width:440px;
margin-right:60px;
}
.aboutTopWrapper{
top:100px;
}
.projectHeader h1{
font-size:32px;
}
.projects{
height:800px;
}
.client-box{
width:94%;
height:500px;
}
.model{
height:250px;
}
.details p{
font-size:16px;
width:250px;
}
textarea{
width:435px;
}
.contactHeader{
width:350px;
left:250px;
}
.formButton{
margin-left:160px;
}
.contactForm{
height:750px;
}
.logoText{
font-size:20px;
}
.links h2{
font-size:20px;
}
.contact h2{
font-size:20px;
}
.footer{
width:100%;
}
.footer .footerContent .footerSection{
font-size:12px;
}
.footer .footerContent .footerSection span{
position:relative;
left:-20px;
}
.develDescriptionMid p{
position:relative;
top:-20px;
width:300px;
left:-10px;
}
.dropDownDiv{
position:relative;
left:250px;
top:-50px;
}
.develHeader{
width:300px;
margin-top:100px;
}
.develHeader h1{
font-size:28px;
}
.develHeader p{
font-size:20px;
}
.develDescription{
width:auto;
margin-top:50px;
height:200px;
}
.develDescriptionMid p{
text-align:left;
font-size:16px;
}
.nav-btn{
z-index:100000;
}
.topServiceText h1{
font-size:26px;
}
.topServiceText p{
font-size:20px;
width:400px;
}
.serviceGridContainer{
display:block;
}
.serviceGrid{
margin-bottom:50px;
}
.bottomService{
position:relative;
width:500px;
}
.form-container{
width:100%;
}
#cursor{
display:none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Home - Odysseus Software</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="author" content="Benjamin White">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Odysseus Software takes the difficulty out of
designing and developing digital products such as apps and websites, and improves
existing products' user experience.">
<link rel="icon" href="favicon-32x32.png" type="image/x-icon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
<link type="text/css" rel="stylesheet" href="lightslider.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="lightslider.js"></script>
</head>
<body>
<div id="cursor"></div>
<div class="wrapper">
<div id="landingImage">
<header>
<div class="container">
<input type= "checkbox" name="" id="check">
<div class="logo-container">
<h3 class="logo">
<a href="index.html"><img src="logo.png" height="75px"></a></h3>
</div>
<div class="nav-btn">
<div class="nav-links">
<ul>
<li class="nav-link" style="--i: .6s">
<a href="services.html">Services<i class="arrowDown"></i></a>
<div class="dropdown">
<ul>
<li class="dropdown-link">
<a href="design.html">Design<i class="arrow down"></i></a>
<div class="dropdown second">
<ul>
<li class="dropdown-link">
<a href="design.html#databases">Databases</a>
</li>
<li class="dropdown-link">
<a href="design.html#gaming">Games</a>
</li>
<li class="dropdown-link">
<a href="design.html#webDesign">Web Design</a>
</li>
<li class="dropdown-link">
<a href="design.html#appDesign">App Design</a>
</li>
</ul>
</div>
</li>
<li class="dropdown-link">
<a href="consulting.html">Consultation<i class="arrow down"></i></a>
<div class="dropdown second">
<ul>
<li class="dropdown-link">
<a href="consulting.html#legal">Legal Documents</a>
</li>
<li class="dropdown-link">
<a href="consulting.html#monitization">Monitization</a>
</li>
<li class="dropdown-link">
<a href="consulting.html#marketing">Marketing</a>
</li>
<li class="dropdown-link">
<a href="consulting.html#seo">SEO/SMO</a>
</li>
</ul>
</div>
</li>
<div class="arrows"></div>
</ul>
</div>
</li>
</li>
<li class="nav-link" style="--i: .85s"><a href="#clientSection">Clients</a>
</li>
<li class="nav-link" style="--i: 1.1s"><a href="about.html">About</a>
</li>
</ul>
</div>
<div class="log-sign" style="--i: 1.8s">
<a href="#section1" class="btn transparent">Contact</a>
</div>
</div>
<div class="ham-menu-container">
<div class="ham-menu">
<div></div>
</div>
</div>
</div>
</header>
<div class="header1">
<h1>We design
<span
class="txt-rotate"
data-period="2000"
data-rotate='[ "mobile apps.", "websites.", "databases.", "UX/UI.", "your ideas." ]'></span>
</h1>
<p>You succeed.</p>
<a href="#section1"><button>Get a quote</button></a>
</div>
</div>
<div class="expert">
<div class="expertHeader">
<h1>Areas of expertise</h1>
</div>
<div class="projTopWrapper">
<div class="projectDescription">
<section>
<h2 class="projHeading">Software Development</h2>
<section>
<div class="iconDiv">
<img src="gear-07.png" width="75px" height="78=5px">
</div>
</section>
<p class="projSubHeading">We assist established companies and start-ups with all levels of
software development from simple web design to complex gaming.</p>
</section>
<section>
<h4 class="projFooter"><a href="#section1"><button class="contactButton">Contact</button></a></h4>
</section>
</div>
<div class="projectDescription">
<section>
<h2 class="projHeading">Project Management</h2>
<section>
<div class="iconDiv">
<img src="people-08.png" width="75px" height="75px">
</div>
</section>
<p class="projSubHeading">Our project management team will assign one of our members as
your sole task manager throughout the lifespan of the project.</p>
</section>
<section>
<h4 class="projFooter"><a href="#section1"><button class="contactButton">Contact</button></a></h4>
</section>
</div>
<div class="projectDescription">
<section>
<h2 class="projHeading">Cost Reduction</h2>
<section>
<div class="iconDiv">
<img src="cost-09.png" width="75px" height="75px">
</div>
</section>
<p class="projSubHeading">Drastically save on development costs and completion time by utilizing
our competitive hourly rates.</p>
</section>
<section>
<h4 class="projFooter"><a href="#section1"><button class="contactButton">Contact</button></a></h4>
</section>
</div>
</div>
</div>
<div class="about">
<div class="aboutHeader">
<h1>What we do</h1>
<p>Odysseus Software Company leverages our licensable codes and competitive pricing to bring your idea to market
in the most cost-effective and time efficient manner. We particularly specialize in mobile and web applications in
the gaming space as well as complex database solutions. We pride ourselves on our start-up optimization which
includes an in-house legal team, marketing agencies, and a plethora of partners to help reduce our clients costs.
We also provide the consulting services needed during development and after product launch.</p>
<a href="#section1"><button>Get a quote</button></a>
</div>
<div class="aboutTopWrapper">
<div class="projectDescription">
<section>
<h2 class="projHeading">Under one roof</h2>
<section>
<div class="iconDiv">
<img src="house-10.png" width="75px" height="75px">
</div>
</section>
<p class="projSubHeading">Reduce unnecessary inefficiencies caused by companies who excessively outsource work.
Remain in control and satisfied knowing all your work is being handled by professionals within our company.</p>
</section>
</div>
<div class="projectDescription">
<section>
<h2 class="projHeading">Legal</h2>
<section>
<div class="iconDiv">
<img src="law-11.png" width="75px" height="75px">
</div>
</section>
<p class="projSubHeading">Through our in-house attorneys, we are able to further assist with cost reduction
by providing legal assistance with start-up documents such as operating agreements, IP assignments, amd more. </p>
</section>
</div>
<div class="projectDescription">
<section>
<h2 class="projHeading">Marketing design</h2>
<section>
<div class="iconDiv">
<img src="design-12.png" width="75px" height="75px">
</div>
</section>
<p class="projSubHeading">
Odysseus offers consulting for post launch marketing
and influencer campaigns, as well as content creation services and other marketing strategies. </p>
</section>
</div>
</div>
</div>
<div class="big-container" id="clientSection">
<div class="clients-container">
<div class="projectDiv">
<div class="projectHeader">
<h1>Recent partners & clients</h1>
</div>
</div>
<ul id="autoWidth" class="cs-hidden">
<li class="item-a">
<div class="client-box">
<p class="client-title">Social Thriving</p>
<img src="SocialThriving.png" class="model">
<div class="details">
<p>We were tasked to bridge the gap between brands and their target audience - increasing brand awareness through
creating and producing valuable content while fostering positive consumer relationships that gain and retain lifelong
customers.</p>
</div>
</div>
</li>
<li class="item-a">
<div class="client-box">
<p class="client-title">Lineup Digital</p>
<img src="LineupDigital.png" class="model">
<div class="details">
<p>Whether you are an event producer, promoter, sports organization, venue, artist, or label, we're here
to take the digital marketing load off you so you can focus on the BIG PICTURE.</p>
</div>
</div>
</li>
<li class="item-a">
<div class="client-box">
<p class="client-title">Top Shelf</p>
<img src="TopShelf-02.png" class="model">
<div class="details">
<p>
Top Shelf Design Co. creaets concepts, brands, logos, stickers, packaging...you name it. We have the perfect designer
for your next project.</p>
</div>
</div>
</li>
<li class="item-a">
<div class="client-box">
<p class="client-title">SoPo App</p>
<img src="SoPoApp-03.png" class="model">
<div class="details">
<p>SoPo enables users to play games with their friends right from their phone or computer, safely. SoPo enables GPS and IP
restriction to ensure fair play.</p>
</div>
</div>
</li>
<li class="item-a">
<div class="client-box">
<p class="client-title">Social Poker</p>
<img src="SoPo-04.png" class="model">
<div class="details">
<p>SoPo, short for Social Poker, is an application developed by poker enthusiasts with the intention of
connecting users like never before.</p>
</div>
</div>
</li>
<li class="item-a">
<div class="client-box">
<p class="client-title">Player's Club</p>
<img src="PlayersClub.png" class="model">
<div class="details">
<p>Player's Club CBD cultivates the highest quality CBD products that are 100% organic and contain zero
tobacco or nicotine. </p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="partner">
<h3>In partnership with:</h3> <img src="partner3.png" height="75px">
</div>
<div class="form-container">
<h2>Lets Talk</h2>
<p>Send us a message and one of our team members will get back to you within 24 hours.</p>
<form action="form.php" method="POST">
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="name" required="required">
<span class="text">Name</span>
<span class="line"></span>
</div>
</div>
<div class="col">
<div class="inputBox">
<input type="text" name="email" required="required">
<span class="text">Email</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="budget" required="required">
<span class="text">Budget</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox textarea">
<textarea required="required" name="message"></textarea>
<span class="text">Message</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<button class="formButton" type="submit" name="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div class="footer">
<div class="footerContent">
<div class="footerSection footAbout">
<h1 class="logoText">Odysseus Software</h1><br>
<p>
We pride ourselves in our start-up optimization.
</p>
</div>
<div class="footerSection links">
<h2>Company</h2>
<br>
<ul>
<a href="design.html"><li>Services</li></a>
<a href="#"><li>Portfolio</li></a>
<a href="webDevel.html"><li>About</li></a>
<a href="#section1"><li>Contact</li></a>
</ul>
</div>
<div class="footerSection contact">
<h2>Contacts</h2>
<br>
<div class="aboutContact">
<span><i class="fas fa-phone"></i> (789) 987-7898</span><br><br>
<span><i class="fas fa-envelope"></i> info@codeodysseus.com</span>
</div>
</div>
</div>
<div class="footerBottom">
© codeodysseus.com | Designed by Ben White
</div>
</div>
</body>
</html>html{
scroll-behavior:smooth;
}
*{
margin:0px;
padding:0px;
box-sizing:border-box;
font-family: 'Montserrat', sans-serif;
}
wrapper{
width:100%;
height:100%;
}
body{
margin:0px;
padding:0px;
background:#f5f5f5;
width:100%;
height:100vh;
}
.footer{
background:#dedede;
color:#7d7d7d;
height:300px;
position:relative;
}
.footer .footerBottom{
background:#cfcfcf;
color:#8c8c8c;
height:50px;
text-align:center;
position:absolute;
bottom:0px;
left:0px;
padding-top:20px;
width:100%;
}
.footer .footerContent{
height:300px;
display:flex;
}
.footer .footerContent .footerSection{
flex:1;
padding:25px;
border:1px solid white;
line-height:23px;
font-size:16px;
}
.footerSection li{
color:#8c8c8c;
}
Media Query
@media screen and (max-width:920px){
.footer .footerContent .footerSection{
font-size:12px;
}
.footer .footerContent .footerSection span{
position:relative;
left:-20px;
}
} <body>
<div class="wrapper">
<div class="footerContent">
<div class="footerSection footAbout">
<h1 class="logoText">Odysseus Software</h1><br>
<p>
We pride ourselves in our start-up optimization.
</p>
</div>
<div class="footerSection links">
<h2>Company</h2>
<br>
<ul>
<a href="design.html"><li>Services</li></a>
<a href="#"><li>Portfolio</li></a>
<a href="webDevel.html"><li>About</li></a>
<a href="#section1"><li>Contact</li></a>
</ul>
</div>
<div class="footerSection contact">
<h2>Contacts</h2>
<br>
<div class="aboutContact">
<span><i class="fas fa-phone"></i> (789) 987-7898</span><br><br>
<span><i class="fas fa-envelope"></i> info@codeodysseus.com</span>
</div>
</div>
</div>
<div class="footerBottom">
© codeodysseus.com | Designed by Ben White
</div>
</div>
</div>
</body>在移动视图中我的页脚溢出太多，我找不到修复它的位置。当页脚在桌面视图中时，溢出不存在，但是一旦我应用媒体查询并缩小窗口，页脚就不会拥抱屏幕的两侧/在某个像素宽度后停止调整大小。我附上了我的 HTML、CSS 以及我在媒体查询中所做的事情。
<div class="footerContent">
<div class="footerSection footAbout">
<h1 class="logoText">Odysseus Software</h1><br>
<p>
We pride ourselves in our start-up optimization.
</p>
</div>
<div class="footerSection links">
<h2>Company</h2>
<br>
<ul>
<a href="design.html"><li>Services</li></a>
<a href="#"><li>Portfolio</li></a>
<a href="webDevel.html"><li>About</li></a>
<a href="#section1"><li>Contact</li></a>
</ul>
</div>
<div class="footerSection contact">
<h2>Contacts</h2>
<br>
<div class="aboutContact">
<span><i class="fas fa-phone"></i> (789) 987-7898</span><br><br>
<span><i class="fas fa-envelope"></i> info@codeodysseus.com</span>
</div>
</div>
</div>
<div class="footerBottom">
© codeodysseus.com | Designed by Ben White
</div>
</div>
.footer{
background:#dedede;
color:#7d7d7d;
height:300px;
position:relative;
}
.footer .footerBottom{
background:#cfcfcf;
color:#8c8c8c;
height:50px;
text-align:center;
position:absolute;
bottom:0px;
left:0px;
padding-top:20px;
width:100%;
}
.footer .footerContent{
height:300px;
display:flex;
}
.footer .footerContent .footerSection{
flex:1;
padding:25px;
border:1px solid white;
line-height:23px;
font-size:16px;
}
.footerSection li{
color:#8c8c8c;
}
Media Query
@media screen and (max-width:920px){
.footer .footerContent .footerSection{
font-size:12px;
}
.footer .footerContent .footerSection span{
position:relative;
left:-20px;
}
}[The overflow is on the right side][1]
[1]: https://i.stack.imgur.com/u8k6p.png
【问题讨论】：
-
请添加代码sn-p或链接codepen
-
另外一个建议是使用移动端媒体查询。最小宽度而不是最大宽度。
-
你在找什么代码sn-p
-
我发的不对
标签： html css media-queries overflow