网页制作，前端基础展示图片和文档

最新推荐文章于 2023-07-25 16:55:40 发布
最新推荐文章于 2023-07-25 16:55:40 发布
阅读量635 收藏 1
点赞数 1
分类专栏： html 文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42139375/article/details/80649492
版权

上面是图片效果，下面是简单的实现代码！最后面有素材图片一张！仅供参考！

 

 

 

 
 
 
  <!DOCTYPE html 
  > 
 
 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
 
 
  < 
  head 
  > 
 
 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
 
 
  < 
  style 
  > 
 
 
 
 
  .p { 
 
 
 
 
  padding: 
  20px; 
 
 
 
 
  height: 
  302px; 
 
 
 
 
  width: 
  602px; 
 
 
 
 
  border: 
  1px 
  solid 
  black; 
 
 
 
 
  line-height: 
  24px; 
 
 
 

   } 
 
 
 
 
  .p img { 
 
 
 
 
  float: 
  left; 
 
 
 

   } 
 
 
 
 
  .p p { 
 
 
 
 
  width: 
  394px; 
 
 
 
 
  margin-top: 
  0px; 
 
 
 
 
  margin-left: 
  20px; 
 
 
 
 
  float: 
  left; 
 
 
 
 
  font-size: 
  14px; 
 
 
 
 
  line-height: 
  24px 
 
 
 

   } 
 
 
 
 
  < 
  / 
  style 
  > 
 
 
 
 
  </ 
  head 
  > 
 
 
 
 
  < 
  body 
  > 
 
 
 
 
 
 
 
 
 
 
 
 
  < 
  div 
  class= 
  "p" 
  > 
 
 
 
 
 
 
 
 
 
 
  < 
  img 
  src= 
  "demo.png" 
  alt= 
  "可爱" 
  > 
 
 
 
 
 
 
 
 
  < 
  p 
  > 
 
 
 
 
  &nbsp;&nbsp;&nbsp;&nbsp; 爱，是两个人的事，彼此信任，方可长久。 
 
 
 

   这个世界对我很公平，让我在千里之外还能牵挂你，这或许是我前世修来的福以至于今生遇见你。距上次见面后已经有两月时间，我不知道你是否想过我?是否心里牵挂我?或许有，或许没有，无所谓，我不在乎你的这些，因为有我想你就够了。 
 
 
 

   自从给你过完生日后，我回来都在想一个问题，我该如何来爱你? 
 
 
 

   但到现在我都没有想明白，或许我对你的了解太少了，我不知道该如何爱你，因为我不想自私的去爱你! 
  < 
  br 
  > 
  &nbsp;&nbsp;&nbsp;&nbsp;只想和你快乐的相爱。 
 
 
 
 
  </ 
  p 
  > 
 
 
 
 
 
 
  </ 
  div 
  > 
 
 
 
 
  </ 
  body 
  > 
 
 
 
 
  </ 
  html 
  > 
 
 

以下是案例中的图片！ 



                

        

        

    




    

      

        

            

              
                
                  xiaofei_sun
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
web前端js基础-制作滚动图片

				
			

			

				

					11-07
				

			

		

		

			
				
在web前端开发中，JavaScript（JS）是一种必不可少的脚本语言，它被广泛用于增加网页的交互性。本文将深入探讨如何使用JavaScript制作一个滚动图片的效果。这种效果常见于网站的轮播图或幻灯片展示，能为用户提供...

			
		

	



                

              
                



	

		

			

				
					
前端网页制作基础项目学成在线

				
			

			

				

					12-17
				

			

		

		

			
				
通过“前端网页制作基础项目学成在线”这门课程的学习，你将具备创建基本网页的能力，并为进阶的前端技术，如JavaScript和框架（如React、Vue或Angular）打下坚实的基础。同时，理解HTML对于任何Web开发人员来说都是...

			
		

	



                


  
              

                


	

		

			

				
					
jquery 聊天功能，编辑区域显示文字加图片

				
			

			

				

					yxm_136452789的博客
				

				

					06-30
					
					261
					
				

			

		

		

			
				
使用可编辑的div插入图片

			
		

	





	

		

			

				
					
web前端之文本

				
			

			

				

					m0_75008371的博客
				

				

					07-10
					
					1491
					
				

			

		

		

			
				
文本，flex问题，float问题，2D，3D，动画

			
		

	



		

			
		



	

		

			

				
					
web前端开发与应用——创建文本区域

				
			

			

				

					m0_59742894的博客
				

				

					12-02
					
					1220
					
				

			

		

		

			
				
textarea标签的属性

textarea标签用于定义多行文本区域，文本区域中可容纳无限数量的文本，其中文本的默认字体是等宽字体（Courier）。

textarea的基本属性

textarea的基本属性主要有：

cols：规定每行中的字符数
	rows：规定可见的行数
	name：规定文本区域的名称
	readonly：规定文本区域为只读
	disabled：规定文本区域为不可用
HTML5中textarea的新属性

textarea的新属性主要有：

wrap：规定表单提交时，文本区域的文本

			
		

	





	

		

			

				
					
web前端（文本样式、元素显示模式、边框、轮廓线、定位）

					
最新发布

				
			

			

				

					m0_74355247的博客
				

				

					07-25
					
					320
					
				

			

		

		

			
				
【代码】web前端（文本样式、元素显示模式、边框、轮廓线、定位）

			
		

	





	

		

			

				
					
前端显示文本时的格式设置

				
			

			

				

					Noodles小飞
				

				

					03-07
					
					2202
					
				

			

		

		

			
				
有时，前端页面文字内容需要按照我们输入的格式显示，比如，我们输入换行、空格，这些在文字显示时都需要显示出来。这里有一个较为简单的解决方式
前端显示界面：

代码：
<div class="btn-group" role="group" aria-label="..."
		style="margin-left: 900px">
		<button id="editText" type="button" class="btn btn-default">编辑内容</button&g

			
		

	





	

		

			

				
					
HTML网页设计，网页制作大作业

				
			

			

				

					04-02
				

			

		

		

			
				
在网页制作中，JavaScript扮演着重要的角色，它可以实现动态效果和交互功能。例如，当用户点击购买按钮时，可以使用JavaScript弹出确认框，或者改变按钮状态以显示已被添加到购物车。此外，通过AJAX（Asynchronous ...

			
		

	





	

		

			

				
					
大学生Web前端期末静态网页设计作业html源代码

				
			

			

				

					12-25
				

			

		

		

			
				
每个页面会包含头部、主体和底部等部分，展示不同类型的网页内容。  2. **CSS**：CSS（Cascading Style Sheets）用于控制网页的样式和布局。在这个项目中，有一个名为`css`的文件夹，里面包含了对HTML元素样式的定义...

			
		

	





	

		

			

				
					
HTML+CSS+JS网页制作课程设计

				
			

			

				

					12-11
				

			

		

		

			
				
HTML（HyperText Markup Language）是网页制作的基础，它定义了网页的结构和内容。在HTML文档中，元素通过标签来表示，比如`<head>`、`<body>`、`<h1>`、`<p>`等，它们告诉浏览器如何解析和展示页面。`<title>`标签...

			
		

	





	

		

			

				
					
WEB前端工程师必备实用网站（图片）

				
			

			

				

					08-27
				

			

		

		

			
				
资深前端大神积累的各种资源，免费开源的，高质量学习资源网址，也是从课程班里淘来的，绝对实用。多多学习，不断进步。

			
		

	





	

		

			

				
					
js实现页面展示图片

				
			

			

				

					03-20
				

			

		

		

			
				
js实现前端展示图片，不用提交后端服务，就可以把图片转换成base64编码展示在前端页面，而且可以对图片的尺寸进行压缩控制

			
		

	





	

		

			

				
					
前端展示工具

				
			

			

				

					07-21
				

			

		

		

			
				
前端展示工具

			
		

	





	

		

			

				
					
HTML5图片分类利器演示页面

				
			

			

				

					02-15
				

			

		

		

			
				
HTML5图片组合归类效果 图片分类利器演示页面

			
		

	





	

		

			

				
					
19个图片展示效果 超级漂亮 有创意

				
			

			

				

					11-26
				

			

		

		

			
				
19个图片展示效果 超级漂亮 有创意 你至少有15个没见过的 10个找不到的

			
		

	





	

		

			

				
					
Java前端：HTML——列表框、文本域、文件域

				
			

			

				

					fancy_male的博客
				

				

					09-22
					
					248
					
				

			

		

		

			
				
表单（列表框）
样例1：
<p>国家：
    <select name="列表名称" id="">
        <option value="中">中国</option>
        <option value="美">美国</option>
        <option value="瑞">瑞士</option>
        <option value="日">日本</opti

			
		

	





	

		

			

				
					
前端展示作品

				
			

			

				

					qq_40440397的博客
				

				

					09-15
					
					706
					
				

			

		

		

			
				
第一个版块：
背景和导航栏设置了动画。

第二个版块：

第三个版块：

第四个版块：


第五个版块：

导航栏跳转：


（图标引用于iconfont.cn,图片来源于网络）




			
		

	





	

		

			

				
					
简单5步，展示自己的网页。前端小白轻松学会，可以把自己写的网页展示给朋友看。

				
			

			

				

					weixin_44619186的博客
				

				

					07-04
					
					5681
					
				

			

		

		

			
				
前端初学者如何在网上发布自己写的网页？
文章目录前端初学者如何在网上发布自己写的网页？1. 创建一个github账号。Github官方地址：https://github.com/2. 登陆自己Github账号。3. 根据图片提示，创建仓库，仓库名尽量语义化。4. 上传自己写的页面。html文件名 必须是index.html！！！重要的事说三遍！！！html文件名 必须是index.html！！！重要的事说三遍！！！html文件名 必须是index.html！！！重要的事说三遍！！！5. 最后一步！选择“ma

			
		

	





	

		

			

				
					
如何利用github在线展示你的前端作品？！

				
			

			

				

					wangnantjobj的专栏
				

				

					12-14
					
					6572
					
				

			

		

		

			
				
我已经成功在githut生成我的前端作品，你可以预览一下效果https://ctianjinnan.github.io/wangnan_resume_demo/ 
接下来一步一步教你实现！！
首先你需要到github官网注册一个账号，https://github.com/  有了账号之后，登录账号。


1、创建仓库




2、设置仓库，创建页面生成器


点击sett

			
		

	





	

		

			

				
					
网页制作基础习题集与答案解析

				
			

			

				

					
				

			

		

		

			
				
网页制作习题答案.pdf 是一份关于网页制作的基础学习资料，主要针对初学者进行考核和教学。该文档包含了一系列判断题和选择题，旨在测试学生对于网页设计和开发的基本概念的理解程度。以下是一些关键知识点的详细...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值