前端基础项目练习

最新推荐文章于 2024-05-02 13:46:30 发布

希望能坚持

最新推荐文章于 2024-05-02 13:46:30 发布

阅读量597

点赞数

分类专栏：黑马程序员女神老师暑期自学前端文章标签： html5 css3

本文链接：https://blog.youkuaiyun.com/weixin_51949907/article/details/125825810

版权

黑马程序员女神老师同时被 2 个专栏收录

1 篇文章

订阅专栏

暑期自学前端

1 篇文章

订阅专栏

项目图片展示

项目HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div class="head wrapper">
        <img src="./images/logo.png" alt="wrong">
        <div class="search">
            <input class="tx" type="text" placeholder="请输入关键字">
            <div class="bt"><input type="button" value="go"></div>
        </div>
    </div>
    <!-- 导航 -->
    <div class="gps">
        <ul>
            <li class="first"><a href="#">首页</a></li>
            <li><a href="#">智能手机</a></li>
            <li><a href="#">平板电脑</a></li>
            <li><a href="#">配件</a></li>
            <li><a href="#">服务支持</a></li>
            <li class="end"><a href="#">关于尚合</a></li>
        </ul>
    </div>
    <!-- 交互图片 -->
    <div class="picture wrapper">
        <a href="#"><img src="./images/banner.png" alt="wrong"></a>
    </div>
    <!-- 公告 -->
    <div class="proclaim">
        <p>最新公告:尚合手机Aone智能手机入网证
            已经获得工信部门审批下发，尚合官方</p>
        <a href="#"><img src="./images/share.png" alt="wrong"></a>
    </div>
    <!-- 服务 -->
    <div class="service">
        <!-- 新品发布 -->
        <div class="new first">
            <h4 class="title">
                <img src="./images/jiantou.png" alt="wrong">
                <a href="#">新品发布</a>
            </h4>
            <a href="#"><img class="p1" src="./images/left_icon.png" alt="wrong"></a>
            <a href="#"><img class="p2" src="./images/right_icon.png" alt="wrong"></a>
            <a href="#"><img class="p" src="./images/shouji.png" alt="wrong"></a>
        </div>
        <!-- 新闻中心 -->
        <div class="new">
            <h4 class="title">
                <img src="./images/jiantou.png" alt="wrong">
                <a href="#">新闻中心</a>
                <a class="more" href="#">更多</a>
            </h4>
            <div class="message">
                <ul>
                    <li><h5><a href="#">致歉公告</a></h5></li>                    
                    <li><a href="#">首批尚合Aonet已全部售空!</a> </li>
                    <li><a href="#">【媒体报导】国产高性价比 尚合Aonet四核手机评测</a></li>
                    <li><a href="#">我司产品已经通过了国家强制性产品3C认证</a></li>
                    <li><a href="#">尚合Aone智能手机入网证已经获工信部门审批下发.</a></li>
                    <li><a href="#">我司通过ISO9001:2008国际质量管理体系认证.</a></li>
                </ul>
            </div>
        </div>
        <!-- 技术支持 -->
        <div class="new end">
            <h4 class="title">
                <img src="./images/jiantou.png" alt="wrong">
                <a href="#">技术支持</a>
            </h4>
            <div class="fix">
                <lu>
                    <li><a href="#">售后服务</a></li>
                    <li><a href="#">投诉与建议</a></li>
                    <li><a href="#">联保网点</a></li>
                    <li><a href="#">常见问题FAQ?</a></li>
                </lu>
            </div>
            <div class="tell">
                <ul>
                    <li><a href="#">深圳市汇聚众合科技发展有限公司</a></li>
                    <li><a href="#">服务热线: 400-633-7922</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 版权 -->
    <div class="copyright">
        <div class="one one1">
            <ul>
                <li><h4><a href="#">尚合首页</h4></a></li>
                <li><a href="#">返回首页</a></li>
            </ul>
        </div>
        <div class="one">
            <ul>
                <li><h4><a href="#">智能手机</h4></a></li>
                <li><a href="#">Aone-T</a></li>
                <li><a href="#">Aone</a></li>
            </ul>
        </div>
        <div class="one">
            <ul>
                <li><h4><a href="#">平板电脑</h4></a></li>
                <li><a href="#">尚PAD S200</a></li>
                <li><a href="#">尚PAD S100</a></li>
                <li><a href="#">尚PAD SH-Q7</a></li>
                <li><a href="#">尚PAD SH-Q5</a></li>
            </ul>
        </div>
        <div class="one">
            <ul>
                <li><h4><a href="#">配件中心</h4></a></li>
                <li><a href="#">Aone 智能手机</a></li>
            </ul>
        </div>
        <div class="one">
            <ul>
                <li><h4><a href="#">服务与支持</h4></a></li>
                <li><a href="#">售后服务</a></li>
                <li><a href="#">投诉与建议</a></li>
                <li><a href="#">联保网点</a></li>
                <li><a href="#">常见问题FAQ</a></li>
                <li><a href="#">订单查询</a></li>
                <li><a href="#">下载专区</a></li>
            </ul>
        </div>
        <div class="one">
            <ul>
                <li><h4><a href="#">关于我们</h4></a></li>
                <li><a href="#">公司介绍</a></li>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">工作机会</a></li>
                <li><a href="#">法律声明</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
        <div class="one">
            <ul>
                <li><h4><a href="#">新闻中心</h4></a></li>
                <li><a href="#">公司新闻</a></li>
                <li><a href="#">媒体报导</a></li>
                <li><a href="#">行业动态</a></li>
            </ul>
        </div>
        <div class="one">
            <ul>
                <li><h4><a href="#">常用链接</h4></a></li>
                <li><a href="#">百度</a></li>
                <li><a href="#">Google</a></li>
                <li><a href="#">新浪微博</a></li>
            </ul>
        </div>
        <a href="#"><img src="./images/top.png" alt="wrong"></a>
    </div>
    <!-- 底部 -->
    <div class="foot">
        <p class="one">
            2011-2012版权所有 深圳市汇聚众合科技发展有限公
            司 (品牌：尚合-SAMHAVE) 服务热线:400-633-7922</p>
        <p class="two">经营许可证编号:粤ICP备11077821号-1</p>
        <p class="three"><a href="#"><img src="./images/bottom_logo.png" alt="wrong"></a></p>
    </div>
</body>
</html>

项目CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}

li {
    list-style: none;
}

.wrapper {
    width: 980px;
    margin: 0 auto;
}

/* 头部 */
.head {
    height: 62px;
}
.head img {
    margin: 20px 0;
}

.head .search {
    float: right;
    margin: 15px 0;
    width: 198px;
}
.head .search .tx {
    border: 2px solid gray;
    background-color: #f5f5f5;
    height: 30px;
    width: 168px;
}

.head .search .bt {
    float: right;
    width: 30px;
}
.head .search .bt input{
    width: 30px;
    height: 30px;
}
/* 导航 */
.gps {
    border-top: 2px solid #e1e1e1;
    height: 56px;
    background-color: #c9c9c9;
}
.gps li {
    float: left;
    padding: 0 35px;
    border-right: 2px solid #e1e1e1;
    line-height: 54px;
}
.gps .first {
    border-left: 2px solid #e1e1e1;
    margin-left: 320px;
}
/* 交互图片 */

/* 公告 */
.proclaim {
    border-top: 2px solid #e1e1e1;
    border-bottom: 2px solid #e1e1e1;
    height: 31px;
}
.proclaim p {
    line-height: 31px;
    margin-left: 200px;
    float: left;
}
.proclaim a img {
    float: right;
    margin-right: 200px;
    margin-top: 8px;
}
/* 服务 */

/* 新品发布 */
.service {
    float: left;
    height: 226px;
    margin-bottom: 18px;
}

.service .title a {
    color: #7ab800;
}
.service .new {
    float: left;
    border: 2px solid #e1e1e1;
    height: 226px;
    width: 312px;
    margin-top: 16px;
    margin-right: 10px;
}
.service .end {
    margin-right: 0;
}
.service .first {
    margin-left: 200px;
}
.service .first .p {
    margin-top: 20px;
    margin-left: 50px;
}
.service .first .p1 {
    float: left;
    margin-top: 100px;
    margin-left: 20px;
}
.service .first .p2 {
    margin-top: 100px;
    margin-right: 20px;
    float: right;
}


/* 新闻中心 */
.service .new .title .more{
    color: #667f99;
    float: right;
    margin-top: 5px;
    margin-right: 5px;
}

.service .new .message {
    margin: 0 24px;
    margin-top: 10px;
}
.service .new .message li {
    border-bottom: 2px dashed #dcdcdc;
    height: 30px;
}
.service .new .message a {
    color: #666666;
    font-size: 10px;
    line-height: 30px;
}
.service .new .message h5 a{
    color: #ff0055;
}

/* 技术支持 */
.service .new .fix {
    margin-left: 29px;
}
.service .new .fix li {
    margin-top: 10px;
}
.service .new .fix li a {
    border-left: 2px solid #98cb00;
    font-size: 10px;
    color: #666666;
}
.service .new .tell {
    margin-top: 30px;
    margin-left: 29px;
}
.service .new .tell li a {
    font-size: 10px;
    color: #666666;
}

/* 版权 */
.copyright {
    clear: both;
    height: 220px;
    background-color: #2d2d2d;
}

.copyright a {
    font-size: 12px;
    color: #707070;
}

.copyright h4 a {
    font-size: 12px;
    color: #c7c7c7;
}
.copyright h4 {
    margin-bottom: 10px;
}
.copyright .one {
    float: left;
    padding-top: 16px;
    padding-left: 40px;
}
.copyright .one1{
    margin-left: 200px;
}
.copyright  a img {
    margin-left: 50px;
}

/* 底部 */
.foot {
    height: 85px;
    background-color: #2d2d2d;
    border-top: 2px dashed #414141;
}
.foot .one {
    font-size: 10px;
    margin-top: 10px;
    margin-left: 380px;
}
.foot .two {
    font-size: 10px;
    margin-top: 10px;
    margin-left: 540px;
}
.foot .three {
    margin-top: 5px;
    margin-left: 628px;
}