• 爱家居网页制作 网页设计与制作html+css+javascript)项目4

    1.项目效果预览

    （不是广告！是书上的web效果预览图）

     2.项目代码

    （1）html代码

    目录

     

    1.项目效果预览

     2.项目代码

    （1）html代码

     （2）css代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>爱家居title>
    8.     <link href="css/style.css" type="text/css" rel="stylesheet" />
    9. head>
    10. <body>
    11.     
    12.     <div id="bg">
    13.         <div class="nav">
    14.             <span class="margin_more">网站首页span>
    15.             <span>床和床垫span>
    16.             <span>卧室纺织品span>
    17.             <span>灯具照明span>
    18.             <span class="search">输入商品名称span>
    19.         div>
    20.     div>
    21.     
    22.     
    23.     <div id="news">
    24.         <div class="news_con">
    25.             <img src="css/images/news1.jpg"/>
    26.             <h2 class="one">BEST 贝达h2>
    27.             <p class="two">将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！p>
    28.             <p class="shadow">p>
    29.         div>
    30.         <div class="news_con">
    31.             <img src="css/images/news2.jpg"/>
    32.             <h2 class="one">PONG波昂h2>
    33.             <p class="two">当孩子能做大人的事，他们会觉得自己很特别也很重要。这也是我们打造PONG波昂儿童扶手椅的原因。现在你们可以并排在一起尽情的放松了。p>
    34.             <p class="shadow">p>
    35.         div>
    36.         <div class="news_con">
    37.             <img src="css/images/news3.jpg"/>
    38.             <h2 class="one">GUNDE冈德尔h2>
    39.             <p class="two">一把椅子蕴含多少亮点？这一款，就值得你多看几眼。它可以折叠，但也很安全。它可以承受100公斤的重量，但本身却很轻盈。p>
    40.             <p class="shadow">p>    
    41.         div>
    42.     div>
    43.     
    44.     
    45.     <div id="exhibition">
    46.         <h3 class="tittle">h3>
    47.         <div class="pic">
    48.             <img src="css/images/img1.jpg"/>
    49.             <img src="css/images/img2.jpg"/>
    50.             <img src="css/images/img3.jpg"/>
    51.         div>
    52.     div>
    53.     
    54.     
    55.     <div id="footer">爱家居版权所有2016-2026京ICP备2222222号  京公网安备222222222div>
    56.     
    57.     
    58.     <div class="tree">
    59.         <img src="css/images/erweima.png"/>
    60.     div>
    61.     
    62. body>
    63. html>

     （2）css代码

    1. *{margin:0;padding:0;outline:none;border:0;}
    2. body{font-family:"微软雅黑";background:#fdfdfd;}
    3. /*head*/
    4. #bg{
    5.     width:1200px;
    6.     height: 617px;
    7.     background:url(images/bg.png) no-repeat;
    8.     margin:0 auto;
    9. }
    10. .nav{
    11.     width:850px;
    12.     height:50px;
    13.     margin:0 auto;
    14.     padding: 50px 0 0 150px;
    15.     background:url(images/logo.png) left center no-repeat;
    16. }
    17. .nav span{
    18.     color:#685649;
    19.     font-size:16px;
    20.     padding:0 30px;
    21. }
    22. .nav .search{
    23.     float:right;
    24.     width:200px;
    25.     height:30px;
    26.     line-height:30px;
    27.     border-radius: 100px;
    28.     color:#aaa;
    29.     font-size:14px;
    30.     background:#fff url(images/f.png) no-repeat 10px center;
    31. }
    32. /*head*/
    33. /*news*/
    34. #news{
    35.     width:1200px;
    36.     height:455px;
    37.     background:url(images/dongtai.jpg) center top no-repeat;
    38.     margin:18px auto;
    39.     padding-top:120px;
    40. }
    41. .news_con{
    42.     float:left;
    43.     margin-left:70px;
    44. }
    45. .news_con .one{
    46.     width:284px;
    47.     height:50px;
    48.     padding-left:10px;
    49.     line-height:50px;
    50.     font-weight:bold;
    51.     font-size:16px;
    52.     border-bottom:1px solid #ddd;
    53. }
    54. .news_con .two{
    55.     width:284px;
    56.     height:70px;
    57.     line-height:20px;
    58.     padding:10px 0 0 10px;
    59.     font-size:12px;
    60.     color:#bbb;
    61. }
    62. .news_con .shadow{
    63.     width:294px;
    64.     height:5px;
    65.     background:url(images/yinying.jpg) no-repeat;
    66. }
    67. /*news/
    68. /*exhibition*/
    69. #exhibition{
    70.     width:1200px;
    71.     background-image:radial-gradient(ellipse at center,#fff,#d6e4ed);
    72.     margin:50px auto;
    73. }
    74. .tittle{
    75.     width:636px;
    76.     height:150px;
    77.     margin:0px auto;
    78.     background:url(images/shenghuo.png) no-repeat center center; 
    79. }
    80. #exhibition .pic{
    81.     width:1000px;
    82.     height:360px;
    83.     margin:0 auto;
    84. }
    85. #exhibition .pic img{margin-left:45px;}
    86. /*exhibition*/
    87. /*foot*/
    88. #footer{
    89.     width:1200px;
    90.     height:80px;
    91.     background:url(images/footer_bg.jpg) repeat-x;
    92.     color:#fff;
    93.     text-align:center;
    94.     line-height:80px;
    95.     margin:0 auto;
    96. }
    97. .tree{
    98.     position:fixed;
    99.     right:5%;
    100.     bottom:5%;
    101. }
    102. /*foot*/

  • 相关阅读:
    leetcode:1957. 删除字符使字符串变好
    【C++】根据字符切割字符串
    机器学习算法交叉验证最频繁犯的6个错误
    JSON 格式化和校验工具
    PPT的使用技巧（一）：对齐、文字填充、柱状图填充
    人工智能知识全面讲解：你真的了解数据吗？
    python多任务、面向对象、命令行启动动态绑定端口号静态web服务器代码实现
    浅析量化交易程序化的优势
    软考 系统架构设计师 简明教程 | 软件开发模型
    影视行业应该如何利用软文进行宣传？媒介盒子告诉你
  • 原文地址：https://blog.csdn.net/weixin_62848089/article/details/126904677