Question

我正在开发一个页面，但我在网页设计方面并不是很好。我的HTML是

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://googledrive.com/host/0B0vEuOxa0lxIajBoRU1UWmdOQjQ/style.css" rel="stylesheet" type="text/css" />
<link href='http://imageshack.us/a/img41/663/iconbg.gif' rel='icon' type='image/gif'/>
<style type="text/css">
BODY
   {font-family:"Segoe Print";
   font-size:25px;
   background-image:url("http://img819.imageshack.us/img819/4145/ld1q.jpg");
   text-align:center;}
</style>
<title>Pointer Calculator...</title>
</head>
<body>
<div style="text-align:right;">
<a class="b" href="?">Home </a>
<a class="b" href=?admin> Admin Login </a>
</div>
<h1 ><a href="?" class="h1">My Heading</a></h1>

我试图在按钮的顶部和左侧设置标题，请您帮助我，其他任何建议都非常有用。

Answer 1

You have used css from google drive for h1 rule where font-size for h1 is 55px which is too much .However I have post this html and css code may be useful for you .

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://googledrive.com/host/0B0vEuOxa0lxIajBoRU1UWmdOQjQ/style.css" rel="stylesheet" type="text/css" />
<link href='http://imageshack.us/a/img41/663/iconbg.gif' rel='icon' type='image/gif'/>
<style type="text/css">
    body {
        margin:0px;
        padding:0px;
        font-family:"Segoe Print";
        font-size:25px;
        background-image:url("http://img819.imageshack.us/img819/4145/ld1q.jpg");
        text-align:center;
    }
    #maincontainer {
        width:1000px;
        margin:0px auto;
    }
    #heading ,#headermenu{
        width:50%;
        height:100px;
        float:left;
    }
    #heading>h1{
        position:relative;
        top:-50px;
    }
</style>
<title>Pointer Calculator...</title>
</head>
<body>
<div id="maincontainer">
    <div id="heading">
        <h1 ><a href="?" class="h1">My Heading</a></h1>
    </div>
    <div id="headermenu">
        <a class="b" href="?">Home </a>
        <a class="b" href=?admin> Admin Login </a>
    </div>
</div><!--end of maincontainer -->
</body>
</html>

enter image description here

Answer 2

试试这个

HTML代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://googledrive.com/host/0B0vEuOxa0lxIajBoRU1UWmdOQjQ/style.css" rel="stylesheet" type="text/css" />
<link href='http://imageshack.us/a/img41/663/iconbg.gif' rel='icon' type='image/gif'/>
<style type="text/css">
BODY
   {font-family:"Segoe Print";
   font-size:25px;
   background-image:url("http://img819.imageshack.us/img819/4145/ld1q.jpg");
   text-align:center;}
</style>
<title>Pointer Calculator...</title>
</head>
<body>

<div style="text-align: right; float: right; margin-top: 25px;">
<a class="b" href="">Home </a>
<a class="b" href=""> Admin Login </a>
</div>
<h1 style="float: left; margin: 0px; padding: 0px;"><a href="" class="h1">My Heading</a></h1>

Answer 3

<div class="header">
        <a href="?" class="h1">My Heading</a>
        <a class="b" href="?">Home </a>
        <a class="b" href=?admin> Admin Login </a>    
       <div class="clear"></div>
</div>
<style type="text/css">
    BODY
   {font-family:"Segoe Print";
   font-size:25px;
   background-image:url("http://img819.imageshack.us/img819/4145/ld1q.jpg");
   text-align:center;}
.h1 {
   float:left;
    margin: 0;
}
.b {
    float: right;
}
.clear { clear: both; } 
</style>

JsFiddle Here http://jsfiddle.net/rn5u5/

Answer 4

只需使用新样式代码更改以前的样式代码！

<style type="text/css">
    body {
        margin:0px;
        padding:0px;
        font-family:"Segoe Print";
        font-size:25px;
        background-image:url("http://img819.imageshack.us/img819/4145/ld1q.jpg");
        text-align:center;
    }
    #maincontainer {
        width:100%;
        margin:0px auto;
    }
    #heading{
        width:50%;
        height:100px;
        float:left;

    }

    ,#headermenu{
        width:50%;
        height:100px;
        float:right;
    }
    #heading>h1{
        position:relative;
        top:-50px;
        text-align:center;
    }
</style>

Answer 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::W3 Origin::</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/nvidia.com/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
</head>

<body>
<center>
<div id="wrapper">
<div id="header">
<div id="header_left">
<div id="logo"><img src="images/logo.png" alt=" " width="233" height="83" /></div>
<img src="images/free-analysis.gif" width="118" height="118" /></div>
<div id="header_right">
<div id="header_bar">
<span class="white_txt">
<img src="images/contact-icon.gif" /> +
<img src="images/mail-icon.gif" /><a href="mailto: info@w3origin.com"> www.</a></span></div>
<div id="follow_us">
<img src="images/follow-us.gif" />
<a href="https://twitter.com/w3origin"><img src="images/twitter-icon.gif" width="45" height="40" border="0" /></a>
<a href="http://in.linkedin.com/pub/w3-origin/23/555/ba3"><img src="images/linkedin-icon.gif" width="46" height="40" border="0" /></a>
<a href="http://facebook.com/w3origin"><img src="images/facebook-icon.gif" width="45" height="40" border="0" /></a></div>
</div>
</div>
<div>
    <ul class="dropdown dropdown-horizontal">
    <li><a href="index.html" class="dir">Home</a></li>
    <li><a href="aboutus.htm" class="dir">About us</a></li>
    <li><a href="seo-services.htm" class="dir">seo services</a>
    <ul>
            <li><a href="smo.htm">SMO</a></li>
            <li><a href="link-building.htm">LINK BUILDING SERVICES</a></li>
            <li><a href="ppc-services.htm">PPC SERVICES</a></li>
            <li><a href="seo-content-writing.htm">SEO CONTENT WRITING</a></li>
        </ul>
    </li>
    <li><a href="network.htm" class="dir">NETWORK</a>
    <ul>
            <li><a href="https://twitter.com/w3origin">TWITTER</a></li>
            <li><a href="http://facebook.com/w3origin">FACEBOOK</a></li>
            <li><a href="http://in.linkedin.com/pub/w3-origin/23/555/ba3">LINKEDIN</a></li>
        </ul>
    </li>
    <li><a href="packages.htm" class="dir">PACKAGES</a>
        <ul>
            <li><a href="./">nZone</a></li>
            <li><a href="./">SLI Zone</a></li>
            <li><a href="./">CUDA Zone</a></li>
            <li><a href="./">Developer Zone</a></li>
            <li><a href="./">PartnerForce</a></li>
            <li><a href="./">Gelato Zone</a></li>
        </ul>
    </li>
    <li><a href="why-us.htm" class="dir">WHY US</a></li>
    <li><a href="request-quote.htm" class="dir">REQUEST A QUOTE </a></li>
    <li class="end"><a href="contactus.htm" class="dir">CONTACT US </a></li>
</ul>    
</div>

Answer 6

body{
font-family:'Georgia', Arial, Verdana;
font-size:12px;
color:#4b4a48;
line-height:18px;
text-decoration:none;
background-color:#f5f5f5;
margin:0px;
padding:0px;}

#wrapper{
width:1000px;
height:auto;
overflow:auto;
text-align:left;
background-color:#FFFFFF;}

#header{
width:auto;
height:147px;
border-bottom:1px solid #FFFFFF;
background-color:#142a38;}

#header_left{
float:left;
width:480px;
padding:15px 0px 0px 0px;}

#logo{
float:left;
padding:30px 70px 0px 40px;}

#header_right{
float:right;
width:500px;}

#header_bar{
width:auto;
height:20px;
padding:5px 15px 5px 5px;
text-align:right;
background-image:url(images/bg-top-right.gif);
background-repeat:repeat-y;}
#header_bar img{
margin:5px 5px 0px 50px;}

#follow_us{
text-align:right;
padding:30px 30px 0px 0px;}
#follow_us img{
margin:0px 5px 0px 5px;}

#flash_header{
clear:both;}

#content{
width:auto;
height:auto;
overflow:auto;
clear:both;
margin:0px 0px 10px;
padding:20px 15px 25px 15px;}

.float_wrapper{
width:auto;
height:auto;
overflow:auto;
clear:both;}

#left_part{
float:left;
width:690px;
height:auto;
overflow:auto;
line-height:19px;}

#left_part ul{
margin:0px;
padding:0px;}

#left_part li{
list-style-type:none;
padding:0px;
margin:0px 0px 0px 5px;}

#right_part{
float:right;
width:265px;
height:auto;
overflow:auto;}

#tab_panel{
clear:both;
height:240px;
overflow:visible;
border:1px solid #25729e;
background-color:#f9f9f9;
margin-bottom:10px;}

.panel_left_img{
float:left;
padding:0px 35px 0px 0px;}

.panel_right_img{
float:right;
padding:0px 0px 0px 0px;}



#enquiry_panel{
height:240px;
border:1px solid #24709c;
background-color:#e7f2fa;
margin-bottom:10px;}
.panel_content{
padding:10px;}
.panel_content label{
font-size:14px;
color:#4c4c4c;
line-height:20px;
text-decoration:none;
float:left;
width:70px;
margin-bottom:5px;}
.panel_content input{
font-size:13px;
color:#525252;
line-height:18px;
float:right;
width:165px;
height:18px;
border:1px solid #7f7f7f;
background-color:#fef5cb;
margin-bottom:5px;}

.panel_content textarea{
font-size:13px;
color:#525252;
line-height:18px;
float:right;
width:160px;
height:60px;
border:1px solid #7f7f7f;
background-color:#fef5cb;}
.line{
clear:both;
padding-bottom:5px;
}

.seprator{
clear:both;
height:10px;}

.min_seprator{
clear:both;}


.sections_left{
float:left;
width:47%;
height:auto;
overflow:auto;
border:1px solid #24709c;
padding:8px;}
.sections_left img{
border:1px solid #d6d7d8;}

.sections_right{
float:right;
width:47%;
height:auto;
overflow:auto;
border:1px solid #24709c;
padding:8px;}
.sections_right img{
border:1px solid #d6d7d8;}

#footer{
width:auto;
height:138px;
overflow:visible;
clear:both;
background-image:url(images/bg-footer.gif);
background-repeat:repeat-x;
padding:15px 10px 10px 10px;}
#sitemap_links ul{
height:100px;
margin:0px;
padding:0px;}
#sitemap_links li{
width:130px;
font-size:13px;
color:#ffffff;
text-decoration:none;
float:left;
list-style-type:none;
border-right:1px dotted #ddd8cb;
text-align:left;
padding:0px 0px 0px 20px;
margin:0px 0px 0px 0px;}
#sitemap_links li a{
color:#ffffff;
text-decoration:none;}
#sitemap_links li a:hover{
color:#ffd171;
text-decoration:none;}
#sitemap_links li.end{
color:#ffffff;
text-decoration:none;
border-right:none;}

#sitemap_links li ul{
margin:0px;
padding:0px;}
#sitemap_links li li{
font-size:13px;
color:#fef1dd;
text-decoration:none;
list-style-type:none;
text-align:left;
border-right:none;
padding:0px 0px 0px 0px;}
#sitemap_links li li a{
color:#fef1dd;
text-decoration:none;}
#sitemap_links li li a:hover{
color:#fef1dd;
text-decoration:underline;}


#footer_strip{
width:auto;
height:30px;
overflow:auto;
clear:both;
padding:5px 15px 5px 15px;
font-size:11px;
color:#ffffff;
line-height:18px;
text-decoration:none;
background-color:#1a425c;}
#footer_nav{
font-size:11px;
color:#ffffff;
line-height:18px;
text-align:right;
text-decoration:none;}
#footer_nav a{
color:#ffffff;
text-decoration:none;}
#footer_nav a:hover{
color:#ffffff;
text-decoration:underline;}



h1{
font-size:17px;
color:#ffffff;
line-height:18px;
text-decoration:none;
font-weight:normal;
text-align:center;
padding:5px;
background-color:#142a38;
margin:0px;}

h2{
font-size:16px;
color:#142a38;
line-height:18px;
text-decoration:none;
font-weight:normal;
text-align:left;
padding:8px 5px 8px 0px;
margin:0px;}

h3{
font-size:14px;
color:#142a38;
line-height:18px;
text-decoration:none;
font-weight:normal;
text-align:left;
padding:0px 0px 0px 0px;
margin:0px;}

.blue-txt{
font-size:13px;
font-weight:bold;
margin:0px;
padding:0px;
color:#3c6078;
padding-bottom:5px;
border-bottom:1px dashed #142a38;}

.blue-txt a{
color:#3c6078;
text-decoration:underline;}

.blue-txt a{
color:#3c6078;
text-decoration:underline;}

.org-txt{
font-size:11px;
font-weight:bold;
margin:0px;
padding:0px;
color:#c74c01;
line-height:22px;}

.org-txt ul{
margin:0px;
padding:0px;}

.org-txt li{
list-style-type:circle;
padding-left:10px;}

.org-txt li a{
color:#c74c01;
text-decoration:underline;}

.org-txt li a:hover{
color:#c74c01;
text-decoration:none;}

.org-txt li ul{
margin:0px;
padding:0px;}

.org-txt li li{
font-size:12px;
color:#4b4a48;
font-weight:normal;
margin-left:40px;
list-style-type:circle;
line-height:19px;
text-decoration:none;}

.org-txt li li a{
color:#4b4a48;
text-decoration:none;}

.org-txt li li a:hover{
color:#4b4a48;
text-decoration:underline;}

p{
font-size:12px;
color:#4b4a48;
line-height:18px;
text-decoration:none;
text-align:justify;
padding:5px 0px 8px 0px;
margin:0px;}

.list_txt ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 20px;}
.list_txt li{
font-size:12px;
color:#4b4a48;
text-decoration:none;
list-style-position:inside;
list-style-image:url(images/list-arrow.gif);}
.list_txt  li a{
color:#4b4a48;
text-decoration:none;}
.list_txt li a:hover{
color:#a80001;
text-decoration:underline;}

.white_txt{
font-size:12px;
color:#ffffff;
line-height:18px;
text-decoration:none;}
.white_txt a{
color:#ffffff;
text-decoration:none;}
.white_txt a:hover{
color:#ffffff;
text-decoration:underline;}

.red_txt{
font-size:12px;
color:#913700;
line-height:25px;
text-align:right;
text-decoration:none;}
.red_txt a{
color:#913700;
text-decoration:underline;}
.red_txt a:hover{
color:#913700;
text-decoration:none;}

.img_right{
float:right;}

.right_panels{
clear:both;
margin-bottom:8px;
border:1px solid #24709c;
background-color:#f5f5f5;}
.panel_content{
padding:8px 8px 5px 8px;}

如何修复按钮左侧的标题

6 个答案: