页面设计导航栏

最新推荐文章于 2024-07-25 11:26:35 发布

浪浪小渔

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量911

点赞数 1

文章标签： html css webview

本文链接：https://blog.csdn.net/m0_63837329/article/details/121910462

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           body,div,ul,li{
               padding: 0px;
               margin: 0px;
               list-style: none;/* 清除黑点 */
           }
           .ba_banner{
               width: 100%;
               height: 288px;
               background-color: #00214d;
           }
           .banner{
               width: 1000px;
               height: 288px;
               /* background-color: #00FFFF; */
               margin: 0 auto;
           }
           .left{
               width: 755px;
               height: 288px;
               background-image: url(img/pic.gif);/* 在此盒子内插入图片 */
               float: left;
               position: relative;/* 相对定位 */
           }
           .right{
               width: 245px;
               height: 288px;
               background-color: rgb(255,255,255) ;
               opacity: 0.2;/* 透明度 */
               float: left;
           }
           .left_content{
               text-align: right;
               position: absolute;
               height: 288px;
               right: 25px;
               top: 70px;
           }
           @font-face {/* 自定义字体 */
               font-family:"cc";
               src: url(dqc.ttf);
           }

           .ok{
               font-family: cc;
               font-size: 30px;
           }
           .a li{
               float: left;
               margin-right: 10px;
           }
           .left_content p{color: white;}
           .a li a{
               display: block;
               width: 46px;
               height: 3px;
               background-color: #FFFFFF;
               opacity: 0.3;
           }
           .b li a{
               float: left;
               margin-right: 10px;
           }
           .a .content a{
               opacity: 0.8;
           }
           .cp{
           clear: both;
           font-family: "黑体";
           font-size: 18px;
           }

       </style>
   </head>
   <body>
       <div class="ba_banner">
           <div class="banner">
               <div class="left">
                   <div class="left_content">
                       <p>YOUDAINSHEJI</p>
                       <p class="ok">有点设计</p>
                       <p>以就业为导向<br/>打造理论与实践相结合的实战型人才</p>
                       <ul class="a">
                           <li class="content"><a href=""></a></li>
                           <li><a href=""></a></li>
                           <li><a href=""></a></li>
                           <li><a href=""></a></li>
                       </ul>
                   </div>
               </div>
               <div class="right">
                   <div class="right_conter">
                       <h4>课程介绍<br/>INTRODUCTION</h4>
                       <ul class="b">
                           <li><a href=""><img src="img/icon1.gif" ></a></li>
                           <li><a href=""><img src="img/icon2.gif" ></a></li>
                           <li><a href=""><img src="img/icon3.gif" ></a></li>
                           <li><a href=""><img src="img/icon4.gif" ></a></li>
                       </ul>
                       <p class="cp">掌握平面设计，页面设计，UI设计，FLASH设计四门主流技术，让你有点设计</p>
                   </div>
               </div>
           </div>
       </div>
   </body>
</html>

浪浪小渔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面设计导航栏

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body,div,ul,li{ padding: 0px; margin: 0px; ...
复制链接

扫一扫