Question

我正在教自己如何通过各种在线教程和这个优秀的网站编写html / css代码。

我将这个简单的css布局编码为测试。

我似乎无法锻炼的一些事情：

当内容不足以填满屏幕时，如何强制页脚粘贴到视口底部？
顶部导航栏，当屏幕尺寸减小时，哪种方法可以很好地折叠？
最后，请随意批评我的代码，任何提示，刻度或课程都会受到赞赏。

提前致谢！

这是代码：

@import url(https://fonts.googleapis.com/css?family=Montserrat:700,400|Open+Sans:400,300,600,700,800);


body {
	font-size: 87.5%;
	font-family: 'open sans', sans-serif;
	line-height: 1.3;
	text-align: left;
	background-color: lightgrey;
	margin: 0;
	min-height: 100%;
}

h1 {
	font-size: 20px;
	font-family: 'open sans', sans-serif;
}

h2 {
	margin: 0;
	border-bottom: solid black 2px;
}

.wrapper {
	margin: 0 auto;
	width: 70%;
}

header {
	background-color: white;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo {
	width: 30%;
	height: 200px;
	background-color: rgb(105, 64, 16);
	border-radius: 0px 0px 0px 10px;
	text-align: center;
	display: flex;
	align-items: center;
}

.logo h1 {
	margin: 0 auto;
	font-size: 30px;
	color: white;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
}

nav {
	width: 70%;
	background-color: rgb(50, 77, 105);
	border-radius: 0px 0px 10px 0px;
	min-height: 200px;
	overflow: hidden;

}
nav ul {
	width: 90%;
	height: auto;
	margin: 50px auto;
	padding: 15px;
	border-radius: 10px 10px;
	background-color: rgb(224, 204, 142);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	}


nav ul li {
	list-style: none;
	display: inline;
	padding: 25px;
	margin: 0 12px;
	border-radius: 10px 10px;
	background-color: rgb(121, 207, 219);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
  color: rgb(17, 44, 96);


}

.content-wrapper {
	background-color: white;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	clear: both;
}

.home-content {
	width: 66%;
	padding: 20px;
}

.home-sidebar {
	width: 26%;
	padding: 20px;
	overflow: hidden;
}

footer {
	background-color: rgb(50, 77, 105);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

footer ul {
	list-style: none;
	margin: 20px 0px 10px 0px;
	padding: 0;
}

footer ul li {
		display: inline;
		padding: 0px 10px;
		color: white;
	}

footer h1 {
	font-size: 30%;
	color: white;
	padding-bottom: 20px;
	padding-top: 10px;
	margin: 0;
}

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/styles.css" >

 <title>Test</title>
    </head>


<body>
<div class="wrapper">

<header>

        <div class="logo">
        <h1>Logo Goes Here</h1>
        </div>

        <nav>
        <ul>
        <li>Page 1</li>
        <li>Page 2</li>
        <li>Page 3</li>
        <li>Page 4</li>
        <li>Page 5</li>
        </ul>
        </nav>

</header>


<div class="content-wrapper">

    <div class="home-sidebar">

        <h2>Sidebar info</h2>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</P>


    </div>

    <div class="home-content">

        <h2>Welcome to company name</h2>

        <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>

        <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</p>

</div>

    </div>


<footer>

<ul id="footNav">
    <li>Home</li>
    <li>Terms &amp; Conditions</li>
    <li>Privacy policy</li>
    <li>Copyright</li>
    <li>Disclaimer</li></ul>

    <h1 id="Copyright">Copyright &copy; 2016 Testing: Something &amp; Something. All Rights Reserved.
    </h1>


</footer>

</div>
</body>

<html/>

Answer 1

1-让您的页脚粘性可以使用

footer{
  position:fixed;
  bottom:0;
  width:100%;
}

2-您可以通过twitter-bootstrap

了解如何使您的网站快速响应

3-你的代码作为一个初学者是好的，但是你必须看到许多已经制作的网站可以产生类似的东西，你可以从w3schools中学到很多东西

祝你好运！

Answer 2

你可以使用 Linked list test 5 --> 4 --> 3 --> 2 --> 1 --> 0 --> NULL size is: 4 This was found: 5 4 --> 3 --> 2 --> 1 --> 0 --> NULL 用于将页脚固定在屏幕底部的css属性。
您可以查看CSS transitions以便很好地隐藏导航栏。使用CSS Media查询获取设备的高度
到目前为止，你做得很好，不断改进

Answer 3

对于粘性页脚，请使用此代码。

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

/*container of the main section of the page*/ 
.content-wrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto
}

CSS页脚不会位于视口底部和其他misc问题

3 个答案: