Question

我有两个问题。首先，当我在我的html标签中写道时，我无法在运行页面时使用我的超链接。另一个主要原因是我的代码不会延伸到整个页面。

这是我为样式化页面而编写的CSS

body {
    background: #B2906F;
    font-family: arial;
    margin: 0;
    height: 100%;
}

.maincontainer{
    width: 100%;
    margin: 0 auto;
}


.picture{
    display: inline;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: -1;
    background-size: 100%;
}

.button{
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    background-color: #05280c;
}
.button-primary:hover {
    background-color: #05370c;
}

h1  {
    display: inline;
    margin: 0;
    background-color: #2c421f;
    padding: 5px;
    position: absolute;
}

ul{
    margin: 0;
    display: inline;
    padding: 0px 0px 0px 250px;
}
ul li {
    display: inline-block;
    list-style-type: none;
    padding: 15px 10px;
    color: #050c0c;
    margin: 0;
    border-radius: 5px;
}

ul li a {
    color: black;
}

footer{
    clear: both;
}

nav {
    color: 
    height: 100%;
    margin: 0;
    background-color: #2c421f;
}

这是我为该页面写的html。任何帮助都是极好的。我被困在这里几天了。

<!DOCTYPE html>
<html>

<head>
    <title>NWWolfPack</title>
    <link href="main.css" rel="stylesheet" />
</head>

<body>
    <div class="maincontainer">
        <h1>NW Wolf Pack</h1>
        <div class="picture"><img src="camo.jpg" width="100%" height="150">
            <header>
                <nav>
                    <ul>
                        <li class="button"><strong>Home</strong></li>
                        <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li>
                        <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li>
                        <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li>
                    </ul>
                </nav>
            </header>
        </div>
        <footer>2017 Dillan Hall</footer>
</body>

</html>

Answer 1

按照：

body {
  background: #B2906F;
  font-family: arial;
  margin: 0;
  height: 100%;
}

.maincontainer {
  width: 100%;
  margin: 0 auto;
}

.picture {
    display: inline;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
    background-size: 100%;
}

.button {
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 5px;
  background-color: #05280c;
}

.button-primary:hover {
  background-color: #05370c;
}

h1 {
  display: inline;
  margin: 0;
  background-color: #2c421f;
  padding: 5px;
  position: absolute;
}

ul {
  margin: 0;
  display: inline;
  padding: 0px 0px 0px 250px;
}

ul li {
  display: inline-block;
  list-style-type: none;
  padding: 15px 10px;
  color: #050c0c;
  margin: 0;
  border-radius: 5px;
}

ul li a {
  color: black;
}

footer {
  clear: both;
}

nav {
  color: height: 100%;
  margin: 0;
  background-color: #2c421f;
}

<div class="maincontainer">
        <h1>NW Wolf Pack</h1>
        <div class="picture"><img src="camo.jpg" width="100%" height="150">
            <header>
                <nav>
                    <ul>
                        <li class="button"><strong>Home</strong></li>
                        <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li>
                        <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li>
                        <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li>
                    </ul>
                </nav>
            </header>
        </div>
        <footer>2017 Dillan Hall</footer>

Answer 2

您的css中.picture上的position:fixed导致您的问题。我还注意到你的maincontainer没有结束div。

Answer 3

从班级<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="center_horizontal" android:background="#e3e2ad" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:textSize="24sp" android:text="View's gravity=" /> <TextView android:layout_width="200dp" android:layout_height="40dp" android:background="#bcf5b1" android:gravity="left" android:text="left" /> <TextView android:layout_width="300dp" android:layout_height="40dp" android:background="#aacaff" android:gravity="center_horizontal" android:text="center_horizontal" /> <TextView android:layout_width="100dp" android:layout_height="40dp" android:background="#bcf5b1" android:gravity="right" android:text="right" /> <TextView android:layout_width="150dp" android:layout_height="40dp" android:background="#aacaff" android:gravity="center" android:text="center" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="center" android:background="#d6c6cd" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:textSize="24sp" android:text="View's gravity=" /> <TextView android:layout_width="200dp" android:layout_height="40dp" android:background="#bcf5b1" android:gravity="left" android:text="left" /> <TextView android:layout_width="300dp" android:layout_height="40dp" android:background="#aacaff" android:gravity="center_horizontal" android:text="center_horizontal" /> <TextView android:layout_width="100dp" android:layout_height="40dp" android:background="#bcf5b1" android:gravity="right" android:text="right" /> <TextView android:layout_width="150dp" android:layout_height="40dp" android:background="#aacaff" android:gravity="center" android:text="center" /> </LinearLayout> </LinearLayout>

中删除position:fixed

picture

你的超链接似乎正在工作..这就是你的意思吗？

Answer 4

使用这个：

<!DOCTYPE html>
<html>

<head>
    <title>NWWolfPack</title>
    <link href="main.css" rel="stylesheet" />



</head>

<body>
    <div class="maincontainer">
        <h1>NW Wolf Pack</h1>
        <div class="picture"><img src="http://www.dvd-ppt-slideshow.com/images/ppt-background/background-5.jpg" width="100%" height="150">
            <header>
                <nav>
                    <ul>
                        <li class="button"><strong>Home</strong></li>
                        <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li>
                        <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li>
                        <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li>
                    </ul>
                </nav>
            </header>
        </div>
        <footer>2017 Dillan Hall</footer>
</body>

</html>

型：

<style>
    button{
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    background-color: #05280c;
}
.button-primary:hover {
    background-color: #05370c;
}

h1  {
    display: inline;
    margin: 0;
    background-color: #2c421f;
    padding: 5px;
    position: absolute;
}

ul{
    margin: 0;
    display: inline;
    padding: 0px 0px 0px 250px;
}
ul li {
    display: inline-block;
    list-style-type: none;
    padding: 15px 10px;
    color: #050c0c;
    margin: 0;
    border-radius: 5px;
}

ul li a {
    color: black;
}

footer{
    clear: both;
}

nav {
    color: 
    height: 100%;
    margin: 0;
    background-color: #2c421f;
}
    </style>

希望这会对你有所帮助。如果有任何其他问题让我知道？

我的页面没有延伸到整个页面

4 个答案: