前端基础——web设计

最新推荐文章于 2024-07-18 15:48:23 发布

我是小张婿元

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量202

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/2301_80788553/article/details/140105079

版权

一、常说的javaweb是什么？

如何进行网页设计？在csdn上的网页是如何设计出来的。在学完java基础后javaweb则是真正企业所需的技术。网页设计分为前端、后端、数据库端。前端就是我们能够看到的，后端则是我们看不到的，这部分代码负责逻辑运行。数据库端则是存放数据的。在进行网页开发是浏览器发挥着重要的作用，浏览器解析渲染前端代码展示给我们空架子。前端发送请求给后端，后端请求数据库端进行响应后在浏览器上展现实实在在的东西。在进行web开发时这三大类都是必不可少的，我们看到的往往是最简单的，接下来我将讲讲javaweb开发最简单的部分前端。

二、前端所需要的工具：html、css、js、vue以及所发挥的作用

①HTML

html负责网页元素、内容等网页结构的添加。当我们只用html设计网页时出现下面这幅图

②CSS

css负责网页颜色大小等网页表现的构造。通过html和css基本能够完成前端新闻网页设计

③javascript

javascript则是对网页行为进行设计，比如交互效果鼠标点击事件、跳转焦点凝聚等

④Vue

Vue则是真正进行企业开发的模版软件，具有模块化、组件化、规范化、自动化。

三、小案例之新闻页面制作

比如这则新闻，我们用html+css就能够制作出来排版。标题的制作、段落制作、作者图片如何引入等。用一端代码来解释一下：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星期五网---体育新闻</title>
    <link rel="stylesheet" href="./新闻网页添加.css">
</head>
<body>
 <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png";
    > <a href="https://news.sina.com.cn/china/" target="_self"> 首页</a>>正文
    <h1>
        欧洲杯今夜看点：豪门对决！姆巴佩PK卢<br>
        卡库 C罗率葡萄牙能否破魔咒
    </h1>
<!-- h1为最大标题，总共h1-h6 -->     注释ctrl+/
    <p>
    正文
</p>
</body>
</html>

CSS代码：

h1{
    position:absolute;
    top: 140px;
    left: 190px;
    font-size: 40px;
    color: #333333;
}

h1{}这种就是css选择器，对h1标题元素进行css改造。还有类选择器、id选择器，比如：

html上进行：

<h1 class="标题">
正文
</h1>

<h2 id="123">
正文
</h2>

css上进行类选择器对应.h1 id选择器对应#

.h1{
text-align:right;
}
#h2{
text-align:right;
}

html与css的代码规范很松出现不规范的也不会出错。

四、JS小案例之交互

在进行JS时我们要学习一下JS的代码语法，其实他的代码与java非常相似。会java基本会JS了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DNM小案例</title>
    <link rel="stylesheet" href="./dom练习.css">
</head>
<body >
    <img id="h1" src="./off.gif" ><br><br>
    <input type="button" value="点亮" id="ch55" >
    <input type="button" value="熄灭" id="ch99"><br><br>
    <input type="text" value="CS" id="name" ><br><br>
    <input type="checkbox" name="comment">电影
    <input type="checkbox" name="comment">动漫
    <input type="checkbox" name="comment">电视剧<br>
    <input type="button" value="全选" id="ch150">
    <input type="button" value="反选" id="ch151">
 
    <script src="./DOM行为.js"></script>
    
</body>
</html>


document.getElementById('ch55').onclick=function(){
    var img=document.getElementById('h1');   //获取元素
    img.src="./on.gif";

}
document.getElementById('ch99').onclick=function(){
    var img=document.getElementById('h1') ;  //获取元素
    img.src="./off.gif";

}
document.getElementById('name').onfocus=function(){
    var input=document.getElementById('name');
    input.value=input.value.toLowerCase();
}
document.getElementById('name').onblur=function(){
    var input=document.getElementById('name');
    input.value=input.value.toUpperCase();
}
document.getElementById('ch150').onclick=function(){
    var choose1=document.getElementsByName('comment');
    for (let i1 = 0; i1 < choose1.length; i1++) {
        const element1 = choose1[i1];
        element1.checked=true;
    }
}
document.getElementById('ch151').onclick=function(){
    var choose2=document.getElementsByName('comment');
    for (let i2 = 0; i2 < choose2.length; i2++) {
        const element2 = choose2[i2];
        element2.checked=false;
    }
}

这个基本实现了对JS对网页行为的设计鼠标点击事件等

我是小张婿元

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端基础——web设计

如何进行网页设计？在csdn上的网页是如何设计出来的。在学完java基础后javaweb则是真正企业所需的技术网页设计分为前端、后端、数据库端。前端就是我们能够看到的，后端则是我们看不到的，这部分代码负责逻辑运行。数据库端则是存放数据的。在进行网页开发是浏览器发挥着重要的作用，浏览器解析渲染前端代码展示给我们空架子。前端发送请求给后端，后端请求数据库端进行响应后在浏览器上展现实实在在的东西。在进行web开发时这三大类都是必不可少的，我们看到的往往是最简单的，接下来我将讲讲javaweb开发最简单的部分。
复制链接

扫一扫