DIV+CSS官网部分布局仿照记

最新推荐文章于 2024-09-14 21:56:49 发布

努力的胡十一

最新推荐文章于 2024-09-14 21:56:49 发布

阅读量134

点赞数

分类专栏：前端基础 html5 文章标签： vscode 前端 html5

本文链接：https://blog.csdn.net/qq_45383769/article/details/124409970

版权

这篇博客记录了作者在仿制一个DIV+CSS官网布局的过程中，逐步完成各个步骤的心得，包括设定body数据、框架搭建、字体及背景设置、悬停效果、元素隐藏与显示以及下拉框样式修正等。

摘要由CSDN通过智能技术生成

DIV+CSS官网部分布局仿照记

目标样式：
在这里插入图片描述

1.材料部分：body部分的数据，数据太多，就没截图完哦，末尾有代码片

在这里插入图片描述

在页面原本上大概是这个样子：
在这里插入图片描述

2.描出大的框架：宽度，高度，背景色，居中

在这里插入图片描述

3.定义字体宽度，高度，背景色，边框线，字体颜色，行高，文本居中显示，左浮动

在这里插入图片描述

4.修改鼠标悬停时背景颜色

在这里插入图片描述

5.隐藏部分元素，在鼠标移动到其标题上时显示该元素

在这里插入图片描述

6.（修正）下拉框中的字体被鼠标悬停时的背景颜色

在这里插入图片描述

7.（修正）下拉列表中的字体大小，显示宽度，背景颜色

在这里插入图片描述

代码片：

<!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>普通官网导航仿照记</title>
    <style>
        .zhuYe{
     /*类选择器，选择类名为zhuYe的元素*/
            width: 1200px;/*宽度为1200px*/
            height: 50px;/*高度为50px*/
            background: #3778bc;/*背景颜色为#3778bc*/
            margin-left: auto;/*实现水平居中*/
            margin-right: auto;/*实现水平居中*/
        }
        .line{
     /*类选择器，选择类名为line的元素*/
            width: 108px;/*宽度为108px*/
            height: 50px;/*高度为50px*/
            background: #3778bc;/*背景颜色为#3778bc*/
            border-right: 1px solid #3a73af;/*设置右边框线，且边框线粗细为1px，颜色为3a73af*/
            font-size: 15px;/*字体大小为15px*/
            color: #ffffff;/*字体颜色为白色*/
            line-height: 50px;/*行高为50px*/
            float:lef