前端速成：双月Java之旅（week7）_day3

最新推荐文章于 2024-10-17 18:27:08 发布

若凡໌້ᮨ

最新推荐文章于 2024-10-17 18:27:08 发布

阅读量117

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_53673193/article/details/126455115

版权

今天是本周学习的第三天，已经构建了PC端网页的大致框架，效果图如下所示。目前只是用CSS做了表面的样式，超链接跳转以及一些js效果还没有使用。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>

   </head>

   <style>
       #div1{
           background-color: gainsboro;
           width: 100%;
           height: 10%;
           line-height: 60px;
           font-size: 20px;
           text-align: center;
       }
       #div2{
           width: 100%;
           height:200px;
           background-color: white;
       }
       #div3{
           background-color:lavender;
           width: 100%;
           margin-bottom: 0px;
           padding 10px;
       }
       #div4{
           float: left;
           margin: 65px 200px;
       }
       #div5{
           float: left;
           line-height: 200px;
           margin-left: 200px;
       }
       #div6{
           float: left;

       }
       #font1{
           text-align: center;
       }
       input[type="text"]{
               width: 700px;
               height: 60px;
               border-radius: 10px;
               font-size: 20px;
               text-align: left;
       }
       input[type="button"]{
           width: 70px;
           height: 60px;
           font-size: 25px;
       }
       a{
           text-decoration: none;
       }
   </style>
   <body οnlοad="init()">
       <div id="div1">
           <a href="">
               您好，请登录
           </a>    
           <a href="">
               <font color="black">
                   免费注册
               </font>    |    
           <a href="">
               <font color="black">
                   商品分类
               </font>    |    <a href="">
               <font color="black">
                   我的订单
               </font>    |    <a href="">
               <font color="black">
                   收藏夹
               </font>    |    <a href="">
               <font color="black">
                   联系客服     |    
               <a href="">
               <font color="black" size="5">
                       购物车
               </font>
               <img src="img/icon_gou.png" width="25px" height="25px">
               </font>
           </a>
       </div>
       <div id="div2">
           <div id="div5">
               <font size="7">小暨交易平台</font>
           </div>

               <div id="div4">
<input type="text" value="请输入搜索内容"/>
<input type="button" value="搜索"/>
</div>
       </div>
       <div id="div3">
           <a href=""><img src="img2/1.png" id="img1" width="40%"/></a>
           <div id="div6">
           <a href="">
               <img src="img/3.jpeg" width="428px"/>
               <br />
           </a>
           <a href="">
               <img src="img/1.jpeg" width="428px"/>
               <br />
           </a>
           <a href="">
               <img src="img/2.jpeg" width="428px"/>
               <br />
           </a>
           <a href="">
               <img src="img/3.jpeg" width="428px"/>
           </a>

           </div>
       </div>
       <div id="font1">
           Copyright(C)小暨公司版权所有<br>ICP备案号：粤ICP备 123456780号
       </div>

   </body>
</html>