Question

homepage design 您好，有人知道如何制作自定义标头，例如我的photoshop设计吗？任何帮助，将不胜感激。这是我的photoshop设计

Answer 1

*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
body{
    margin: 0;
    padding: 0;
}
.header{
    float: left;
    width: 100%;
    background: url(https://cdn1.imggmi.com/uploads/2019/7/15/0c4eafcb45980cac3db6acdbbab2692e-full.jpg);
    height: 630px;
    background-position: center;
    background-size: cover;
   
}
.icon{
    color: #fff;
    font-size: 20px;
    margin: 20px auto !important;
    width: 100%;
    max-width:263px;
    z-index:4;
}
.icons{
    float:left;
    padding: 0 5px 0 5px;

}

.wrapper{
    display: block;
    width: 100%;
    margin: auto;
    text-align: center;
    z-index: 10;
    float: left;
    padding: 70px 0;
}
.wrapper h1{
    float: left;
    width: 100%;
    font-size: 59px;
    color: #ff5050;
    text-transform:uppercase;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: 2px;
}
.wrapper p{
    float: left;
    width:100%;
    color: #fff;
    font-size: 26px;
    font-family: cursive;

}
.wrapper h5{
    float:left;
    width:100%;
    font-size: 21px;
    padding: 17px 0 0 0;
    color: #8ced33;
    text-transform: uppercase;
    text-shadow: 0 0 2px #fff;
}
.button{
    float: left;
    height: 65px;
    width: 36px;
    position: relative;
    align-items: center;
    padding: 2px 50 0 0;
    background: #fff;
    border-radius: 17px;
    left: 50%;
}
.dot-head {
    margin-top: 12px;
}
.dot {
    background: #ff5050;
    height: 7px;
    width: 7px;
    margin: 3px 14px;
    border-radius: 10px;
    float: left;

}
header{
    float: left;
    width: 100%;
    background: #41a944;
    box-shadow: 0 0 9px #0000007a;
}
.container{
    display: block;
    width: 100%;
    margin: auto;
    text-align: center;
    z-index: 10;
    float: left;
}
.nav,.nav-center{
    float: left;
    margin: 0 auto;
    position: relative;
    left: 20%;
    text-transform: uppercase;
}
.nav ul,.nav-center ul{
    float:left;
    margin: 0;
    padding: 0;
}
.nav ul li , .nav-center ul li{
    float: left;
    list-style: none;
}
.nav ul li a{
    text-decoration:none;
    color: #fff;
    font-size: 14px;
    padding: 14px 15px;
    float: left;
    font-family:serif;

}
.nav ul li a:hover,.nav ul li a.active{
    background: blanchedalmond;
    opacity: 1;
}
.nav-center{
    background:#FFC107;
}
.nav-center ul li a{
    font-size:23px;
    text-decoration:none;
    color: #fff;
    padding: 14px 15px;
    float: left;
    letter-spacing: 3px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.nav.nav-right {
    padding-left: 70px;
    padding-top: 4px;
}
.nav.nav-left {
    padding-right: 70px;
    padding-top: 4px;
}

<script src="https://use.fontawesome.com/fc129cf184.js"></script>
<div class="header">
         <div class="icon">
             <div class="pinterest icons">
                <i class="fa fa-pinterest-p " aria-hidden="true"></i>
             </div>
             <div class="futball icons">
                <i class="fa fa-futbol-o" aria-hidden="true"></i>
             </div>
             <div class="twitter icons">
                <i class="fa fa-twitter" aria-hidden="true"></i>
             </div>
             <div class="facebook icons">
               <i class="fa fa-facebook" aria-hidden="true"></i>
             </div>
             <div class="skype icons">
                <i class="fa fa-skype" aria-hidden="true"></i>
             </div>  
             <div class="youtube icons">
                <i class="fa fa-youtube" aria-hidden="true"></i>
             </div>
         </div>
        <div class="wrapper">
            <h1>BizFolio</h1>
            <p>The Mai Concern Of Work is</p>
            <p>High User Experience and quality coding</p>
            <h5>webdesign-sitebuilding-CMS Configuration</h5>
        </div>
        <div class="button">
            <div class="dot-head">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>    
        </div>
    </div>
    <header>
        <div class="container">
            <div class=" nav nav-left">
                <ul>
                    <li><a href="javascript:void(0)">The Team</a></li>
                    <li><a href="javascript:void(0)">Service</a></li>
                    <li><a href="javascript:void(0)">Portfolio</a></li>
                </ul>
            </div>
            <div class="nav-center">
                <ul>
                    <li><a href="">BizFolio</a></li>
                </ul>
            </div>
            <div class="nav nav-right">
                <ul>
                    <li><a href="javascript:void(0)">About us</a></li>
                    <li><a href="javascript:void(0)">Contact us</a></li>
                    <li><a href="javascript:void(0)">Blog</a></li>
                </ul>
            </div>
        </div>
    </header>

您可以将这种结构用于psd设计

如何使标题像我的photoshop设计一样？

1 个答案: