css+html知识

最新推荐文章于 2024-09-14 17:04:32 发布

lw16666

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量69

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/lw16666/article/details/121856047

版权

这篇博客探讨了网页设计中的三种样式方法——行内样式、内部样式和外部样式，强调了外部样式在维护和复用上的优势。内容还涉及HTML元素的分类，如块级元素和行内元素，并通过示例展示了网页布局，包括导航栏、搜索框和底部信息等。同时，代码段展示了如何应用CSS实现浮动效果。

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

在网页样式设计时，有三种方法：行内样式，内部样式，外部样式。一般采用的是外部样式，它利于维护，方便复用，也实现了网页内容与样式分离。在优先级上，行内样式>内部样式>外部样式。css元素大致可以分为：块级元素：可以容纳块级元素和行内元素，符合盒子模型。行内元素：只能容纳行内元素，不可进行宽高设计，和左右内边距，以及外边距。

<!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>Document</title>
    <link rel="stylesheet" href="百度.css">
</head>
<div class="logo">
    <img class="logo" src="03-百度首页/bdlogo.gif" alt=""></div>
<div class="nav"><a href="#">新 闻</a>&nbsp; <strong>网 页</strong>&nbsp;<a href="#"> 贴 吧</a> &nbsp;<a href="#">知 道</a> &nbsp;<a href="#">音 乐</a>&nbsp;
    <a href="#">图 片</a> &nbsp;<a href="#">视 频</a> &nbsp;<a href="#">地 图</a></div>
<br />
<div class="sousou"><input type="text" class="search" />&nbsp;<input type="button" value="百度一下" class="btn" /></div>
<br />


<div class="more"><a href="#">百科</a>　<a href="#">文库</a>　<a href="#">hao123</a> | <a href="#">更多&gt;&gt;</a></div><br />
<br />
<div class="map"><img src="03-百度首页/ic.jpg" />&nbsp;<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a></div><br />
<br />
<div class="bottom"><a href="#">把百度设为主页</a>&nbsp;<a href="#">安装百度卫士</a><br />
    <a href="#">加入百度推广</a> | <a href="#">搜索风云榜</a> | <a href="#">关于百度</a> | <a href="#">About Baidu</a><br /> ©2013 Baidu 使用百度前必读 京ICP证030173号 </div>
</div>

<body>

</body>

</html>

<!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>Document</title>
    <link rel="stylesheet" href="浮动.css">
</head>

<body>
    <div id="kd">
        <div class="daohang">
            <legend id="log">logo</legend>
            <br>
            <legend id="lastname">孔氏摄影专辑</legend>
            <ul>
                <li>网址首页</li>
                <li>咨询中心</li>
                <li>产品展示</li>
                <li>关于我们</li>
                <li>联系我们</li>
            </ul>
        </div>
        <div id="img">
            <div id="ba">
                <img id="img1" style="width: 1400px; height:450px;" src="imgs/banner.jpg" alt="">
            </div>
            <p style="font-size: medium; font-weight: bold;"> &nbsp;&nbsp;&nbsp;&nbsp; 当前位置：首页>关于我么</p>
            <hr>
            <div>
                <img id="jpg1" style="height: 200px; width: 300px ;" src="imgs/01.jpg" alt="">
                <p id="sm">水墨（风格）摄影和传统的水墨画一样，现市面上出现的水墨摄影作品，按题材， 可以分为风景和花鸟，对应国画中的山水画和花鸟画；按手法和意境，可以分为抽象和具象，对应国画中的写意和工笔。 水墨风格的摄影照片虽然免不了使用Photoshop等软件的后期加工， 但是这并不意味着可以任意扭曲原照片。 全息摄影是指一种记录被摄物体反射波的振幅和位相等全部信息的新型摄影技术。 普通摄影是记录物体面上的光强分布，它不能记录物体反射光的位相信息， 因而失去了立体感。全息摄影采用激光作为照明光源，并将光源发出的光分为两束，
                    一束直接射向感光片，另一束经被摄物的反射后再射向感光片。 人眼直接去看这种感光的底片，只能看到像指纹一样的干涉条纹， 但如果用激光去照射它， 人眼透过底片就能看到原来被拍摄物体完全相同的三维立体像。 一张全息摄影图片即使只剩下一小部分，依然可以重现全部景物。 全息摄影可应用于工业上进行无损探伤，超声全息，全息显微镜，息 摄影存储器,全息电影和电视等许多方面。
                </p>
            </div>


        </div>
    </div>
</body>

</html>