首页 > 编程知识 正文

简单的网页图片(设计一个简单的网页)

时间:2023-05-04 14:06:13 阅读:73676 作者:186

获取指向源代码的链接,然后单击此处

网页头部的banner和信息部分新闻部分的底部

一头儿

效果:

首先初始化css

分析:头上有图片、input输入框和按钮下面的通栏

使用左浮的话,右浮的地方不同,所以我们可以写普通文件

如果不定义宽度和高度,此处的徽标图像将影响底部路径栏的设置,导致其中第一个路径栏和其他路径栏的顺序不一致

二、路径栏(宽度为100%,以适应屏幕,无需设置) )。

效果

分析:某ul中有6个li,鼠标滑动时文字颜色改变(hover ),ul在整个通栏nav中用名为nav-con的div包裹,居中显示。

margin :0自动机以nav-con为中心。

a链接是内联元素,在设置宽度高度时将其转换为内联块显示:内联块; 字体:如果字体较粗,且“字体大小”/“行高”和“字体高度”相同,则字体居中

三. banner

效果:

四.信息公告

分析:整体部分文字(中间放一个箱子),部分图片)右边用一个箱子),这两个箱子分别左右浮动,调用fl、fr

五.新闻部分

效果:

分析:有三个部分。 我们大致用了三个箱子,里面的内容

照片文字(上)和中间照片左右箭头的照片用)子绝父相) position

图片文字(上)、列表项目ul、li、border-bottom为dashed虚线,《道歉公告》单独设置风格

图片上的文字(上)和列表项目我用div包起来,下面还有p标签的段落

六.底部

效果

注意:现在,在news部分使用类来清除浮动,以避免news部分与底部重叠

首先,dt和dd被放置在dl标签中,标签dt与dd处于相同的水平。 也就是说,dt不能进入dd内,dd不能进入dt内。 在dl下,dt和dd位于兄弟标签上。 多少个DD标签都可以。 不能在不同时使用dl的情况下单独使用dt或dd标签。

分析:有上下两部分。 一个是dl dt dd配置列表的标题和虚线下的中央字符

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。