二、博客首頁完成《iVX低代碼仿CSDN個人博客制作》

制作iVX 低代碼項目需要進入在線IDE:https://editor.ivx.cn/

一、菜單思路參考及制作

在 CSDN 首頁中的菜單部分為一串橫排的內容,并且可以進行拖動:
在這里插入圖片描述
首先咱們添加一個行,命名為菜單:
在這里插入圖片描述
接著肯定是需要設置上下的內邊距內容:
在這里插入圖片描述
接著直接往這個行中添加文本內容即可:
在這里插入圖片描述
很明顯,當前文本字號與我們所需要的效果差距比較大,設置對應的字號使其大小(13號字體)合適于當前頁面:
在這里插入圖片描述
由于每個字體都會左右相隔一段距離,那么此時直接設置這個文本的左右內邊距即可:
在這里插入圖片描述
接著我們復制這個文本在該行中進行顯示:
在這里插入圖片描述
頁面呈現效果如下:
在這里插入圖片描述
但是此時內容換行了,我們該怎樣使內容同一行進行顯示呢?并且可以滑動?

此時只需要設置包裹這些文本的行取消換行即可,點擊菜單行,在屬性中把自動換行關閉即可:
在這里插入圖片描述
接著還需要設置當前這一行的剪切屬性,剪切屬性可以使當前這一行的內容可以滑動,但是會出現滾動條,咱們還需要將滾動條隱藏,使其更加美觀:
在這里插入圖片描述
效果如下:
在這里插入圖片描述
此時你再預覽將會發現頁面可以進行滑動。

二、輪播圖制作

菜單欄之后是一個輪播圖:
在這里插入圖片描述
該輪播圖占據整行,并且自動進行滾動,那如何制作呢?需要通過行和圖片自己設置嗎?這個不需要,咱們只需要再擴展組件中的特殊功能容器找到輪播組件即可:

在這里插入圖片描述
首先添加一個行,命名為輪播,并且設置高度為 160px 背景色為透明:
在這里插入圖片描述
在這里插入圖片描述
接著添加輪播容器:
在這里插入圖片描述
添加輪播內容后我們發現當前輪播內容超出了父容器高度,此時需要設置這個輪播容器的高度為 100%:
在這里插入圖片描述
接著給這兩個輪播頁添加對應的對應的背景圖片:
在這里插入圖片描述
此時頁面效果如下:
在這里插入圖片描述
那如何增加對應的文本呢?

增加文本內容有兩個方式,其中一種是在這個輪播容器之下新建一個行,在這個行中添加對應的文本。那你可能問,創建一個行不就在下面顯示了,如何可以顯示在當前輪播也之上呢?

其實咱們的行有很多作用,例如在行中設置內容后,設置上的上外邊距為負,那么此時就可以往上移動,這樣就可以覆蓋在這個輪播容器之上了,但是文本卻不能進行輪播,這種方法需要額外的制作很多的事情,例如你要設置動畫,幾秒播放一次,這個還好,更加麻煩的是你還需要設置鼠標拖動時你要如何進行響應,這并不是很劃算,在此只是提供一個不一樣的思路,咱們現在在這個輪播頁中添加文本還是要從整個輪播容器中進行添加。

輪播容器中的輪播頁是一個頁面,那么一個頁也是一個容器,所以咱們可以在這個輪播容器中添加文本內容,但是這個文本內容你還需要控制,最好的方法就是添加一個行,設置其內邊距以及一個對齊方式,這樣就可以很方便的控制文本了。

首先添加一個行命名為文本在這個輪播頁之中:
在這里插入圖片描述
由于其本身這個行具有背景色,所以導致輪播圖遮擋:
在這里插入圖片描述
此時直接設置這個行的背景色即可:
在這里插入圖片描述
此時你可以設置當前行的高度為輪播頁的高度:
在這里插入圖片描述
再設置垂直方向的對其為底部,這樣內容就會在底部顯示,你添加文本也會在底部顯示:
在這里插入圖片描述
添加文本后設置其顏色和大小:
在這里插入圖片描述
現在將會在底部顯示,但是我們不要絕對的底部,此時你可以搜索當前行的高度也可以設置內邊距即可,此時我設置左內邊距以及高度縮小:
在這里插入圖片描述
在這里插入圖片描述
此時效果如下:
在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/286105.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/286105.shtml
英文地址,請注明出處:http://en.pswp.cn/news/286105.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【MATLAB統計分析與應用100例】案例009:創建一個RandStream類對象,調用其randn方法生成標準正態分布隨機數

文章目錄 1. 創建一個RandStream類對象s,其隨機數生成器的算法為mlfg6331_64,初始種子為102. 調用對象s的randn方法生成10行10列的隨機數矩陣x,其元素服從標準正態分布1. 創建一個RandStream類對象s,其隨機數生成器的算法為’mlfg6331_64’,初始種子為10 % 對象s的randn方…

CentOS 安裝NTFS-3G,讓系統支持NTFS分區的方法

1、ntfs-3g依賴FUSE(Filesystem in Userspace) 先處理依賴 安裝FUSE yum install fuse -y 2、下載并安裝ntfs-3g (先確定正確安裝了rpmforge 套件,然后安裝下列套件: yum install fuse fuse-ntfs-3g 若rpmforge的設置…

現在是2016-09-23,查詢2個月后的月份和入職的月份相同的數據

select * from emp where to_char(hiredate,mm)to_char(add_months( sysdate,2),mm); 結果: 轉載于:https://www.cnblogs.com/feng666666/p/5900182.html

Git之創建遠程分支和刪除遠程分支

1、創建遠程分支browser-1.8.0 在沒有創造browser-1.8.0之前,我們先查看下所有分支 git branch -a 可以知道我們目前在browser-1.7.0分支,然后我們創建本地分支browser-1.8.0 git branch browser-1.8.0 再看下所有分支 git branch -a 然后我們再切換到分支browser-1.8.…

ASIHTTPRequest源碼簡單分析

2019獨角獸企業重金招聘Python工程師標準>>> 1.前言 ASIHttprequest 是基于CFNetwork的,由于CFNetwork是比較底層的http庫,功能比較少,因此,在ASIHttprequest中實現了http協議中比較多的功能,包括代理、gzi…

Blazor University (28)表單

原文鏈接:https://blazor-university.com/forms/表單源代碼[1]EditForm 組件是 Blazor 管理用戶輸入的方法,這種方法可以輕松地對用戶輸入執行驗證。它還提供了檢查是否滿足所有驗證規則的能力,如果沒有滿足,則向用戶顯示驗證錯誤…

【遙感物候】1983-2012年時間序列中國地區GIMMS 3g NDVI下載(已進行旋轉、格式轉換、投影變換和裁剪)

文章目錄 1. 數據集簡介2. 數據集預覽3. 數據集下載1. 數據集簡介 本數據集為1983-2012年,長時間序列中國地區GIMMS 3g NDVI,空間分辨率為0.08333度,作者已完成了數據預處理:包括旋轉、格式轉換、投影變換和裁剪),作者可以此基礎上直接進行NDVI時空變化趨勢分析、基于NDV…

三、博客首頁完成《iVX低代碼仿CSDN個人博客制作》

制作iVX 低代碼項目需要進入在線IDE:https://editor.ivx.cn/ 一、首頁內容分析 此時我們分析一下首頁內容: 通過以上內容可以得知,這些內容都統一包含在一個塊之內,這個塊之內包含了多個內容,這些內容主要是分為標題…

正則表達式 (grep)

正則表達式 (grep) grep (global search regular expression(RE) and print out the line,全面搜索正則表達式并把行打印出來)是一種強大的文本搜索工具,它能使用正則表達式搜索文本,并把匹配的行打印出來。搜索的結果被送到屏幕,不影響原文…

C語言試題四十九之只刪除字符串前導和尾部的*號,串中字母之間的*號都不刪除。 n 給出了字符串的長度,h字符串中前導*號的個數,e給出了字符串中最后的*個數

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 假定輸入的…

|洛谷|DFS|P1101 單詞方陣

http://www.luogu.org/problem/show?pid1101 循環找到一個y后向8個方向搜索&#xff0c;直到搜到g&#xff0c;然后按照方向反向填充即可 #include<cstdio> #include<algorithm> #include<cstring> #include<queue> #define ms(i,j) memset(i,j, size…

vuejs 和 element 搭建的一個后臺管理界面【收藏】

介紹&#xff1a; 這是一個用vuejs2.0和element搭建的后臺管理界面。 相關技術&#xff1a; vuejs2.0&#xff1a;漸進式JavaScript框架&#xff0c;易用、靈活、高效&#xff0c;似乎任何規模的應用都適用。 element&#xff1a;基于vuejs2.0的ui組件庫。 vue-router&#xff…

【MATLAB統計分析與應用100例】案例010:matlab調用normrnd函數生成正態分布隨機數

效果預覽: 文章目錄 1. 調用normrnd函數生成1000行3列的隨機數矩陣x,其元素服從均值為75,標準差為8的正態分布(1)代碼(2)運行效果2. 調用normrnd函數生成1000行3列的隨機數矩陣x,其各列元素分別服從不同的正態分布(1)代碼(2)運行效果<

四、博客詳情頁完成《iVX低代碼仿CSDN個人博客制作》

制作iVX 低代碼項目需要進入在線IDE&#xff1a;https://editor.ivx.cn/ 一、博客詳情頁分析 博客詳情頁大體分為頂部標題、發布時間、作者信息、博文內容&#xff0c;底部的評論我們在此不必做懸浮內容&#xff0c;咱們直接放到博文之下進行顯示即可&#xff1b;頂部標題需要…

【原創】erlang 模塊之 application

2019獨角獸企業重金招聘Python工程師標準>>> kernel-2.15.2 中的內容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 轉載于:https://my.oschina.net/moooofly/blog/595122

RabbitMQ詳解(三)

一、分發到多Consumer(fanout) 二、Routing路由(Direct) 三、主題路由(Topic)一、分發到多Consumer(fanout)將同一個Message deliver到多個Consumer中。這個模式也被稱為"publish/subscribe" 創建一個日志系統&#xff0c;包含兩部分&#xff1a;第一部分發出log(Pro…

重磅 | Linux內核5.19初步支持LoongArch架構

經過龍芯中科與內核社區一年多的緊密合作&#xff0c;北京時間2022年6月4日清晨&#xff0c;Linux內核社區正式合并LoongArch架構支持代碼。隨著Linux-5.19的rc1版本的正式發布&#xff0c;LoongArch體系結構主體部分的源碼已合并到內核主線之中&#xff0c;其余相關代碼正在進…

C語言試題五十之請編寫一個函數void function(char *ss),其功能時:將字符串ss中所有下標為奇數位置上的字母轉換為大寫(若位置上不是字母,則不轉換)。

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 請編寫一個…

【MATLAB統計分析與應用100例】案例011:matlab讀取Excel數據,調用regress函數作一元線性回歸分析

數據擬合效果預覽: 文章目錄 1. 讀取數據,繪制散點圖2. 計算相關系數3. 繪制回歸直線4. 剔除異常數據,重新調用regress函數作一元線性回歸1. 讀取數據,繪制散點圖 ClimateData = xlsread(examp08_01.xls); % 從Excel文件讀取數據 x &

“*** IS NOT TRANSLATED IN …….. 解決辦法

首先引起提示的原因是因為Lint 代碼檢查工具發現你的項目中&#xff08;或者引用的三方庫&#xff09;有部分string.xml文件內容做了國際化操作&#xff0c;但卻不完整&#xff0c;有些文本內容并沒有相應的國際化翻譯&#xff0c;在android開發中常見于項目引用的Libraries第三…