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

最新推荐文章于 2024-05-31 10:52:23 发布

努力的胡十一

最新推荐文章于 2024-05-31 10:52:23 发布

阅读量119

点赞数

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

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

版权

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{

最低0.47元/天解锁文章

努力的胡十一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS官网部分布局仿照记

DIV+CSS官网部分布局仿照记目标样式：1.材料部分：body部分的数据，数据太多，就没截图完哦，末尾有代码片在页面原本上大概是这个样子：2.描出大的框架：宽度，高度，背景色，居中3.定义字体宽度，高度，背景色，边框线，字体颜色，行高，文本居中显示，左浮动4.修改鼠标悬停时背景颜色5.隐藏部分元素，在鼠标移动到其标题上时显示该元素.6.（修正）下拉框中的字体被鼠标悬停时的背景颜色7.（修正）下拉列表中的字体大小，显示宽度，背景颜色代码片：<!DO
复制链接

扫一扫